随着技术日新月异的发展,我以为已经可以完全甩掉ie浏览器,驰骋在新技术的海洋里。却不想,ie兼容问题如影随行。

当然,尝试解决ie浏览器兼容问题,并不代表我会去拥护它。我想做的只是为解决浏览器兼容提供一些个人思路,毕竟,很多公司还会有此类的需求。

这里,我将提供一套解决方案,以及如果碰到ie浏览器兼容问题,我们该怎么办?

一、明确你要兼容的浏览器范围

很简单,当你明确了要兼容的浏览器范围,不需要兼容的浏览器就可以一并处理了。例如:直接弹出提示,指引用户下载chrome,firefox等现代浏览器。简单粗暴,但却有效。

那么我们如何去过滤呢,这时候,条件注释就可以上场了,用法如下:

1
2
3
4
5
6
7
8
9
10
<!--[if !IE]> 除IE外都可识别 <![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->

符号解释:

1
2
3
4
5
6
7
!(非):[if !IE]
lt(小于):[if lt IE 6]
lte(小于或等于):[if lte IE 6]
gt(大于):[if gt IE 8]
gte(大于或等于):[if gte IE 9]
&(与):[if (gt IE 6)&(lt IE 8)]
|(或):[if (IE 6)|(IE 7)]

嗯,不错,一大半的负担被卸掉了。

因为我足够幸运,只需要解决ie9浏览器的兼容问题。所以,可以这么写:

1
<!--[if lte IE 8]><script src="/zh/assets/js/ie-warning.js"></script><![endif]-->

js中设置了cookie和url重定向,引导用户去下载chrome浏览器,这里就不细说了。

当然,兼容问题哪有这么容易就搞定的,我们继续往下走~

二、检查页面中的伪类和伪元素

这里还是以ie9示例,下面列出ie9对伪类的支持情况:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//ie9不支持的伪类和伪元素
:default
:valid
:invalid
:in-range
ut-of-range
:required
ptional
:read-only
:read-write
::before
::after
::first-letter
::first-line
::value
::choices
::repeat-item
::repeat-index

如果你要兼容ie8,你肯定也会搜到一份类似的支持文档,其他ie版本以此类推。

对于不支持的情况,我们只能换方案,举个简单🌰:
清除浮动的方式有很多,为了代码优雅,恰巧我们选择了用after伪元素的方式,如下:

1
2
3
4
5
6
7
.clear:after {
 content:".";
 height:0;
 visibility:hidden;
 display:block;
 clear:both;
}

很好,ie9说:“不可以!”。好,那就换一个大家都比较容易接受的方案,如下:

1
2
3
.clean{
clear:both;
}

不外乎就是在页面加个空容器,虽然不优雅,但足够通用。

说了这么多,想表达的意思无非就是:

不支持的伪类和伪元素,换通用的方案去兼容。

三、排查css3兼容问题

如果你对css3浏览器支持情况不是很了解,点击这里检测
检测动图

四、使用css hack

到这里,浏览器危险属性已经都排查完了。我们开始局部细节调整,这里就需要用到css hack了。
ie6 hack:

1
2
3
Selector { _property: value; } /* property: value 表示 css 的属性名: 属性值 下同 */
Selector { _property/**/: /**/value; }
Selector { -property: value; } /*IE6 css hack常用习惯推荐使用下划线_ */

ie7 hack:

1
2
*+html Selector {}
*:first-child+html Selector {}

ie8 hack:

1
2
3
4
5
Selector { /* 注意看value值的 */
property: value1; /* W3C MODEL */
property: value2\0; /* IE 8+ */
property: value1\9\0; /* IE 9+ */
}

ie6,7,8共有hack:

1
Selector { property: value\9; }

ie6,7共有hack:

1
2
3
Selector { *property: value; }
Selector { #property: value; }
Selector { +property: value; }

ie8 hack:

1
Selector { property: value\0; }

ie9 hack:

1
Selector { property: value\9\0; }

根据实际的应用场景,选择不同的hack,用css覆写就可以了。再举一个简单的栗子:

1
2
3
4
5
6
7
// ie9 hack
.index_scrm{
.swiper-wrapper{
overflow:hidden\9\0;
height: 380px\9\0;
}
}

想了解更详细的css hack,请走这边:传送门

五、js判断浏览器类型

css hack也用上了,但是某种情况下,hack也并不完美。所以,我们再加一道保险,用js来做局部控制。

这里使用js检测浏览器类型,不仅仅是为了解决兼容问题,还可以干一些你想干的其他事情,不要被局限。


方式一:
1
2
3
4
5
6
7
8
9
10
11
12
13
var isIE=!!window.ActiveXObject;
var isIE6=isIE&&!window.XMLHttpRequest;
var isIE8=isIE&&!!document.documentMode;
var isIE7=isIE&&!isIE6&&!isIE8;
if (isIE){
if (isIE6){
alert('ie6');
}else if (isIE8){
alert('ie8');
}else if (isIE7){
alert('ie7');
}
}

方式二:

1
2
3
4
5
6
7
8
9
10
11
12
if(navigator.appName == 'Microsoft Internet Explorer' && navigator.appVersion.match(/6./i)=='6.'){
alert('IE 6');
}
else if(navigator.appName == 'Microsoft Internet Explorer' && navigator.appVersion.match(/7./i)=='7.'){
alert('IE 7');
}
else if(navigator.appName == 'Microsoft Internet Explorer' && navigator.appVersion.match(/8./i)=='8.'){
alert('IE 8');
}
else if(navigator.appName == 'Microsoft Internet Explorer' && navigator.appVersion.match(/9./i)=='9.'){
alert('IE 9');
}

方式三:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
if(navigator.userAgent.indexOf('Opera') != -1) {
alert('Opera');
}
else if(navigator.userAgent.indexOf('MSIE') != -1) {
alert('Internet Explorer');
}
else if(navigator.userAgent.indexOf('Firefox') != -1) {
alert('Firefox');
}
else if(navigator.userAgent.indexOf('Netscape') != -1) {
alert('Netscape');
}
else if(navigator.userAgent.indexOf('Safari') != -1) {
alert('Safari');
}
else{
alert('无法识别的浏览器。');
}

方式四:

1
2
3
if(!+'\v1' && !'1'[0]){
alert('ie6或ie7')
}

以上js代码基本覆盖了大部分主流浏览器,到这里90%以上的浏览器兼容问题应该都可以搞定了吧。

六、我的问题清单

大概总结一下,以下是已知ie9的兼容问题:
1.swiper3.0以上,不支持ie9;
解决方案:换swiper2.*版本,或者换插件。

2.after等伪元素不支持;
解决方案:用div或者其他元素等效替代。

3.ie9支持的属性background-size怎么也会失效;
解决方案:如下

1
2
3
4
5
6
7
8
9
10
11
12
13
//这么用
>.two {
background-image: url(../image/yunzi/temp04.png);
background-size: 100%;
width: 300px;
background-position: center;
}
//而不要这么用
>.three {
background-image: url(../image/yunzi/temp05.gif);
background-size: 170%;//不给宽度,容易受影响,显示异常
background-position: center 5%;
}

4.flex布局失效,如何解决;
解决方案:用float或者flex.css库去兼容。

5.display: none\9\0失效,需要改成display: none\9,好奇怪;
解决方案:好奇怪,不按套路?

6.ie9中特定条件下绝对定位失效?
相对定位内的绝对定位元素内部的相对定位元素,ie9下会嵌套异常。
解决方案:简化嵌套结构。

7.keyframes ,ie9不兼容;
解决方案:降级动画。

8.ie9中img只给width或者height会塌陷;
解决方案:严格按照图片比例,来计算显示比例,两个属性都要设值,否则图片显示异常。

七、小结

文章结构我反复改了很多次,无非想让整个解决方案清晰明了。如果有不当或者表达不清楚的地方,希望大家可以提出来。共同探讨,共同进步~

八、参考文章

浏览器类型判断:
http://www.jb51.net/article/27876.htm
css hack:
http://www.webhj.com/hj-650.html
ie9伪类支持:
http://blog.csdn.net/lml_little/article/details/51074779
css3属性检测:
http://caniuse.com/#search=transform