记一次项目向下兼容ie8

chrome
祝其他浏览器早日爆炸,我大chrome终将一统江山。

1
2
3
4
5
6
7
8
9
项目起初:
这个需要响应式布局~
OK没问题,反正是IE9以上,rem + media媒体查询 分分钟给撸出来:)

十年之后:
项目现在要兼容到IE8,就差一个版本应该很好做吧?
A U kidding me?你以为就一个数字的差距呢。。。
反正甲方要求IE8了,你看着调整一下吧。
。。。。

所以,我又打开了恶心的IE,一个页面一个页面得开始调整不兼容的属性了。

不兼容的属性

media媒体查询

1
2
</head>前加上
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

html5标签

1
2
</head>前加上
<script src="https://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>

rem单位

1
2
</body>前加上
<script src="rem.js"></script>

以上三个还好说,引一下插件就行了。。 细节的调整才是最痛苦的。。

opacity

1
2
3
4
5
opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); // IE8的写法

opacity: 1;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);

background-size

这个属性在IE8是不支持的,更不要说页面里大量的cover和contain了
修改这里时,我用了前辈写的polyfill

使用方法:

1
2
3
4
5
6
.selector { 
background-size:cover ;
/ * url是相对于页面文档,而不是css文件!* /
/ *优选绝对URL以避免混淆。* /
-ms-behavior:url(/backgroundsize.min.htc);
}

坚持原创技术分享,您的支持将鼓励我继续创作!