IE11兼容

看见了

前言

由于经常需要跟IE11打交道(虽然文章发表时,IE11已经正式宣布退役了),原因是安防监控视频播放需要调用activeX控件。所以将自己的一些经验总结下。

原则

  1. 渐进增强:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
  2. 优雅降级:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。优雅降级:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

元标签

<!--[if IE]>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<![endif]-->

如果你跟我一样只用兼容IE11,其实这个标签带不带无所谓(毕竟客户也只用IE11)。一般只要兼容IE8、9的倒霉蛋才会去了解这个标签(滑稽)。更多看这个回答

IE11 CSS hack

IE11各种奇葩的样式问题,都离不开CSS hack。

<!doctype html>
<html>
 <head>
  <title>IE10/11 Media Query Test</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <style>
    @media all and (-ms-high-contrast:none)
     {
     .foo { color: green } /* IE10 */
     *::-ms-backdrop, :root .foo { color: red } /* IE11 */
     }
  </style>
 </head>
 <body>
  <div class="foo">Hi There!!!</div>
 </body>
</html>

实际情况是,我只会用到@media all and (-ms-high-contrast:none)这个媒体查询,因为我只需要兼容IE11,同时将所有兼容样式保存在单独一个文件,确保样式隔离和代码复用。

更多IE相关的CSS hack写法可以查看这个stackoverflow回答

如果你遇到兼容IE11以下的版本,建议你提桶跑路(滑稽)

在IE11中,往往意味着CSS3很多特性是不支持的,你需要特别谨慎,比如一些UI库,部分组件使用了比较新的CSS特性,这都会给你的开发带来隐藏的缺陷,这也是技术选型的重要影响因素。

CSS reset

CSS reset 方案, 虽然这个库很久没更新维护了,不过基本不影响使用。

查询特性是否支持

大部分兼容性API你都可以通过上面2个网站去查询,简单举2个例子(没办法通过构建工具实现兼容):

  • IE11 不支持 CSS initial属性值
text-align: initial; // IE不会生效

这个我曾经在Element框架上遇到,算是小坑,只能独立做样式兼容。像这样的一些属性还有很多,但有一说一,IE11对样式兼容性已经算是友好了。

  • IE11 crypto 需要带ms前缀
var crypto = crypto || msCrypto

IE11支持某些特定api,但需要带特定的ms前缀,基本上构建工具没办法帮你做到,只能你自己手动实现兼容。

Canva

插入图片尽量避免使用SVG格式,建议使用PNG格式替代,我至今没有找到解决方案。

IE11 滚动条样式

IE没办法改变滚动条的宽度,如果有这个需求,请使用第三方库。

body{
  scrollbar-base-color: #000;
  scrollbar-face-color: #000;
  scrollbar-3dlight-color: #000;
  scrollbar-highlight-color: #000;
  scrollbar-track-color: #000;
  scrollbar-arrow-color: black;
  scrollbar-shadow-color: #000;
  scrollbar-dark-shadow-color: #000;
}

参考文章

阅读 260

solfKwolf的前端杂记
涉及个人学习心得与经验

i'm look for a good job :)

568 声望
10 粉丝
0 条评论

i'm look for a good job :)

568 声望
10 粉丝
文章目录
宣传栏