关于IE浏览器兼容性的3种解决方案-原创手记-慕课网

背景
浏览器兼容性问题一直是前端工程中的棘手问题，特别是IE6、7、8、9对W3C标准的支持有一定的缺陷，而国产浏览器大部分都是使用IE6/7，因此兼容低版本的IE就是显得非常重要了。
兼容IE的3种方案
经过阅读阿当的《编写高质量代码--Web前端开发修炼之道》和阅读hao123的源码归纳出四种流行的IE兼容性方案。

1.HTML条件注释加载对应版本的css文件

IE官方的HTML条件注释是IE官方推出用于解决IE浏览器兼容性问题的方。

页面例子：

>这种方案的可以方便地删除某个IE版本的兼容代码，比如有一天IE6没有了，可以删除ie6.css,因为是IE官方推荐的，因此也更稳定。
但是这种方案将标准代码和兼容性代码放在不同位置，不好维护，理论上，兼容性代码应该放在标准代码的后面。

######2.使用css样式hack给CSS样式添加一些前缀，那么该样式声明就只会被特别的浏览器识别，我们可 以通过这种方式进行浏览器兼容处理。

/IE 8/9/10/11/
background: blue\0;
/IE 6/7/*
background: #cda;
/IE 6/
-background: red;
_background: red;

 例子：

.test{
background: black;
/IE 7/
background: red;
/IE 6*/
_background: red;
}

>这种方式的优点是标准样式和兼容性代码可以放在一起,但是不能保证最新的IE浏览器会不会因为识别这种兼容性代码，而代码新的兼容新问题。不过，目前IE已经停止发布，因此，我们可以放心使用了。######3.HTML条件注释给html标签添加标志class，通过标志css写兼容代码这个方案区别于前面两个，前面两个虽然CSS的兼容性代码所存放的位置不同，但是代码还是一样的，都是使用_和\*等方式进行兼容性处理。
这里通过给html标签添加class,y用来识别当前的浏览器，进而通过标准的CSS样式处理兼容性问题！**代码**：

<!DOCTYPE html>

<html>

 例子：

<!DOCTYPE html>

<html>
<head>
<style>
.color{
background: red;
}
/兼容性代码,比css hack更好维护和稳定/
.ie6 .color{
background: blue;
}
.ie7 .color{
background: #8bffe2;
}
.ie8 .color{
background: #ffa86c;
}
.ie9 .color{
background: #2ad42c;
}
/height=200/
.h200{
height: 200px;
}
</style>
</head>
<body>
<div class="color h200"></div>
</body>
</html>

>这个方案可以作为css 样式前缀的hack方案，并且不用担心将来浏览器的兼容问题，因为她是标准的。**[可以作为浏览器兼

作者：iamc
链接：https://www.jianshu.com/p/f22a78473ea8