CSS基础（六）---IE浏览器的兼容

所谓的浏览器兼容问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，IE6-IE8浏览器在Web发展中起到很大阻力，Web前端工程师写好的页面在Firefox、Chrome、Opera等主流浏览器下测试，基本没有什么问题，而在IE6-IE8浏览器下预览，又是另一番景象，本来规整的页面全乱了。

幸好随着HTML5的盛行，IE低版本的浏览器也逐渐退出舞台，所以现在很多网站也不再去考虑IE6-IE8低版本的浏览器，不过有些特殊的网站不得不考虑低版本浏览器，比如政府网站、教育系统网站，网站性质也决定了不得不兼容低版本浏览器，那么下面我们就介绍一下常见的IE低版本的兼容方式，如果你的客户网站不考虑低版本浏览器，你就可以完全忽略这篇博客。

1.IE6双倍边距

产生因素：当元素有float属性，又有margin属性时，在IE6下面显示的margin的值是设置值的两倍。

解决方法：将有float属性的元素添加display:inline属性。

2.伪类选择器hover

产生因素：IE6只支持a标签的CSS定义hover效果，其他标签添加hover效果没有任何作用。

解决方法：一方面可以使用JavaScript添加鼠标移入效果，另一方面只能将其他标签改变为a标签后再添加hover效果。

3.定义元素的不透明度

产生因素：opacity:0.5，可以改变元素的透明度，取值范围是0~1，但是IE6不支持这种透明度表现方式。

解决方法：IE6浏览器专属的透明度属性， filter：alpha（opacity=80），取值范围是0~100。

4.IE各个版本hack

• 属性hack方式

.box {_width:100px;}             /* IE6专用*/

.box {*+width:100px;}          /* IE7专用*/

.box {*width:100px;}            /* IE6、IE7共用*/

.box {width:100px\0;}           /* IE8、IE9共用*/

.box {width:100px\9;}           /* IE6、IE7、IE8、IE9共用*/

.box {width:330px\9\0;}        /* IE9专用*/

• 选择器hack

*html .box{width:100px;}       /*IE6*/ 

*+html .box{width:100px;}     /*IE7*/