所谓的浏览器兼容问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，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*/