不使用 JavaScript，仅在 CSS 中实现为 IE10 / IE11 单独设置样式（IE11 不支持 flex: 1； / ES6，IE11 之前不支持 Swiper）

目录

1. 为 IE10 / IE11 单独设置样式（exp：文字渐变色）

2. IE11 不支持 flex: 1（exp：行政办公）

3. IE11 中 不可以使用 es6（exp：防抖定时器）

4. IE11 之前的版本不兼容 swiper

---

1. 为 IE10 / IE11 单独设置样式（exp：文字渐变色）

• 以 文字渐变色 为例，IE10 / IE11 不支持 该属性
• 为提高用户体验，除了设置主流浏览器的样式外，还应针对 IE10 / IE11 进行单独设置
• 在 css 中采用 媒体查询 可以实现上述需求

    <style>.top {color: transparent;background-image: linear-gradient(0deg, red, blue);-webkit-background-clip: text;font-size: 60px;}@media screen and(-ms-high-contrast: active), (-ms-high-contrast: none) {.top {color: red;background: none;}}</style><div class="top"> IE11 不兼容文字渐变 </div>

• IE10 / IE11 效果：
• 
• Chrome 效果：
• 

---

2. IE11 不支持 flex: 1（exp：行政办公）

•  如果采用 flex 布局：
• 必须指定子元素 宽度 或者 高度，让子元素分配父容器 
• 子元素不能写 flex: 1，这不能使其自动平分剩余空间 
• IE11 之前版本的 IE浏览器，对 flex布局 支持很差

---

3. IE11 中 不可以使用 es6（exp：防抖定时器）

• 发现这个问题是因为，我当时再写弹框划出的事件，在 chrome 中正常，在 IE11 中无效
• 
• 报错的位置是 防抖函数：function delayFun()
• 该函数的主要作用：防止短时间内多次点击弹框触发按钮，导致弹框动画效果失效

 function delayFun(fn) {let timeout = null;return function () {clearTimeout(timeout);timeout = setTimeout(() => {fn.apply(this, arguments);}, 100);};$(".model-handle").click(delayFun(function () {$(this).parent("li").addClass("active").siblings().removeClass("active");modalIndex = $(this).attr("data-modalHandleIndex");eachMyModal(modalIndex);}));

• 这里报错是因为，IE11 不能识别 es6 语法，setTimeout 后面跟了 es6 语法
• 解决方案：去语法转换网站，将 es6 转换为 es5

1. babel 在线转换地址：Babel · The compiler for next generation JavaScript (babeljs.io)
2. Traceur 在线转换地址：Traceur (google.github.io)

• 注意：直接将 setTimeout 后面改成 function 无效，还是直接转换比较安全

  function delayFun(fn) {var timeout = null;return function () {var _this = this,_arguments = arguments;clearTimeout(timeout);timeout = setTimeout(function () {fn.apply(_this, _arguments);}, 100);};}

4. IE11 之前的版本不兼容 swiper