ie11适配踩坑

坑1-页面毫无反应，打开控制台恢复正常

原因： 在ie中，仅当控制台打开后console对象才能访问，否则console对象为undefined。如果代码中访问了console对象（如console.log）,在ie中会报错导致页面无反应

解决方式： 利用如下polyfill，当不存在console对象时手动新建一个console对象，避免空指针报错。

if(!window.console) {
  var console = {
    log : function(){},
    warn : function(){},
    error : function(){},
    time : function(){},
    timeEnd : function(){}
  }
}

坑2-flex: 1的元素高度塌陷为0

原因： 我们知道flex: 1有如下转换关系

flex: 1;
// 等同于
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;

在ie中，当flex-direction: row时，即使flex-basis: 0，元素也能依据实际情况进行伸缩；然而当flex-direction: column时，flex-basis: 0会导致元素高度塌陷为0

解决方式： 设置flex-basis: auto

// 推荐使用
flex: 1 1 auto;

坑3-flex容器内部文字溢出

原因： ie11上flex的bug

解决方式： stackoverflow.com/questions/3…

坑4-不支持line-clamp

原因： ie不支持line-clamp属性

解决方式： 使用第三方js库实现clamp效果

• www.npmjs.com/package/vue…
• www.npmjs.com/package/vue…

坑5-在win7缺少Media Source Extensions，无法直接播放HLS格式视频

原因： 同样是ie11，但在win7和win10上存在差异。 win7 ie11由于缺少Media Source Extensions，无法使用html5播放器播放HLS格式视频

解决方式：win7 ie11上使用flash播放器播放HLS视频

坑6-伪元素不展示

原因： 伪元素没有默认的display属性，我们必须得为伪元素声明display属性。另外ie认为伪元素的样式被父元素样式给覆盖了（所以伪元素样式被划掉了），但实际渲染是没问题的。