首页 > 安全资讯 >

浏览器兼容问题

17-07-26

浏览器兼容问题。随着技术日新月异的发展,我以为已经可以完全甩掉ie浏览器,驰骋在新技术的海洋里。却不想,ie兼容问题如影随行。当然,尝试解决ie浏览器兼容问题,并不代表我会去拥护它。我想做的只是为解决浏览器兼容提供一些个人思路,毕竟,很多公司还会有此类的需求。

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

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

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

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

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

 

符号解释:

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

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

 

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

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

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

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

 

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

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

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

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

 

三、排查css3兼容问题

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

 

四、使用css hack

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

 

ie7 hack:

ie8 hack:

ie6,7,8共有hack:

ie6,7共有hack:

ie8 hack:

ie9 hack:

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

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

五、js判断浏览器类型

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

 

方式一:

方式二:

方式三:

方式四:

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

六、我的问题清单

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

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

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

 

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

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

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

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

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

七、小结

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

 

 
相关文章
最新文章
热点推荐