兼容性问题

1. 每个属性必须兼容吗

css3属性（例如transition，border-radius），超大一部分肯定是不兼容IE8，部分不兼容IE9/IE10，部分根本不兼容IE。可以使用超复杂的js来解决部分的问题，但是并不完美，也使代码增加不必要的复杂度，所以不需要也不推荐去处理css3属在IE里面的兼容显示，但是一定要保证正常布局和浏览。

IE8-（主要指IE6，IE7）浏览器的兼容，某些属性和现代浏览器以及IE高版本显示差异巨大（例如fixed定位的不支持、min-width等的不支持，定位auto居中方式不支持），且目前IE浏览器的市场占比份额已经低的可怜，请放弃繁琐的IE8-浏览器的兼容，抵制辣鸡浏览器从我做起。非得兼容可以参考后面部分的IE-hack。

2. 常见的兼容处理

opacity，IE8及以下不支持，使用滤镜filter:alpha(opacity=值)来代替；

rgba颜色、HSL颜色，IE8级以下不支持，在rgba之前始终定义一种通用颜色保证IE的代替方案；

部分选择器，IE6不支持属性选择器、子元素选择器 >、相邻兄弟选择器 +，没有替代的方案，考虑实际情况做取舍；

:hover等伪类，IE6只支持a标签的hover，考虑实际情况做取舍；

查看兼容性的非常好用的网站： Can I Use

3. 超好用的IE条件语句

这个东西就很牛逼了，这种判断写法只有IE能认识，其他浏览器会当做正常注释来处理，一起来看一下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!--[if IE]>
    只有IE才支持
<![endif]-->

<!--[if !IE 7]>
    IE7不支持
<![endif]-->

<!--[if lt IE 8]>
    IE8以下浏览器才支持
<![endif]-->

<!--[if lte IE 8]>
    IE8及以下浏览器才支持
<![endif]-->

<!--[if gt IE 8]>
    IE8以上浏览器才支持
<![endif]-->

<!--[if gte IE 8]>
    IE8及以上浏览器才支持
<![endif]-->

4. 优雅降级与渐进增强

通俗一点来解释吧：

优雅降级：开始项目 -> 管TM的兼容性先干了再说 -> 网站写完了现代浏览器显示屌的不行 -> 低版本浏览器有问题 -> 改一改吧，保证正常的显示。

渐进增强：开始项目 -> 猥琐点先用全浏览器兼容的主体布局 -> 这个模块我可以使用新的CSS3让他在现代浏览器表现的更好！ -> 还有这里也可以表现的更好 -> 行了，低版本浏览器显示不会乱，但是优秀的浏览器有更优秀的显示。

采用哪种呢？没有定论，依据项目的实际情况来定吧，比如项目不再在于IE低版本，当然采用优雅降级方式，写完了调整一下IE9+的显示就ok。比如项目很需要保证稳定性和各平台的正确显示性，采用渐进增强。

5. 很JR蛋疼的css hack

需要做IE6 IE7兼容的前端者，这可能对你有用。

有些比较骚的css写法只能特定的IE浏览器才能解析：

只有IE6能解析： p { _color:red; } *****p {color:red;}

只有IE7能解析： *+p {color:red;}

IE6与IE7能解析： p {***color:red;} p {#color:red;} p {+**color:red;}

IE6 IE7与IE8： p {color:red\9;}

IE8以上能解析： p {color:red\0;}

还有一些，甚至有专业的前辈列出了表，有兴趣的兄dei百度了解更多吧

最后更新： 2019年10月13日 22:35

原始链接： http://ldc5886.github.io/2019/05/26/CSS%E5%85%BC%E5%AE%B9%E6%80%A7%E9%97%AE%E9%A2%98/

赏
× 请我吃糖~
打赏二维码