现在大部分企业对浏览器兼容要求是IE7+或者IE8+,要求IE6的很少,此处一并写出。
IE6:
<span style="color: #800000;">_margin-top: 20px;</span>
IE6+IE7:
<span style="color: #800000;">*margin-top: 20px;<br></span>
<span style="color: #800000;">+margin-top: 20px;</span>
IE6+:
<span style="color: #800000;">margin-top: 20px\9;</span>
IE8+:
<span style="color: #800000;">margin-top: 20px\0;</span>
IE9:
<span style="color: #008000;">/*</span><span style="color: #008000;">:root在谷歌浏览器中也能被识别,所以需要加\9</span><span style="color: #008000;">*/</span><span style="color: #800000;"> :root .item</span>{<span style="color: #ff0000;"> margin-top</span>:<span style="color: #0000ff;"> 20px\9</span>; }
IE8:
<span style="color: #008000;">/*</span><span style="color: #008000;">没有针对IE8的hack代码,但是可以组合实现</span><span style="color: #008000;">*/</span><span style="color: #800000;"> margin-top:10px\0; :root .item</span>{<span style="color: #ff0000;"> margin-top</span>:<span style="color: #0000ff;"> 20px\9</span>; }
这只是头疼医头,脚痛医脚。可以解决生产中遇到的IE兼容问题,却不清楚究竟是哪些属性导致的兼容问题,有必要对浏览器解析CSS属性做一些了解,生产中尽量避开这些坑,提高开发效率。