浏览器兼容问题

随着技术日新月异的发展，我以为已经可以完全甩掉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会塌陷；解决方案：严格按照图片比例，来计算显示比例，两个属性都要设值，否则图片显示异常。

七、小结

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