ie6下的兼容性问题

做这写浏览器兼容性测试的时候，我这知道解决ie低版本浏览器中css兼容性问题有时候只需要把某个属性改成与其他浏览器不一样就可以解决问题，但是我一直不知道这样做的原因是什么，知道有一天我读了一本书，上面介绍了hasLayout，我才知道这么做的原因。

hasLayout是ie浏览器的一个专有属性，用于css的解析引擎。有时候在ie下一些复杂的css设置解析起来会出现bug，其原因可能与haslayout没有被触发有关。

hasLayout的触发方式，如设置width，height，position：relative；再者设置zoom：1；等等这些方式都可以触发hasLayout属性。下面就是我解决ie6兼容性的实例。这些应该有很大一部分与haslayout属性的触发有关吧。

（1）高度小于10px，在ie6下显示的实际高度可能变大.当设置一个div的高度小于10px，在ie6下显示的实际高度可能变大，解决方案有两个：

如图，在这个div的样式里加上_overflow:hidden;这个属性，下划线的意思是适配ie6。另一个是把这个属性换成_font-size:0;也可以；

（2）.ie6下外边距加倍：如margin-bottom：4px；解决方案：_margin-bottom：2px；

（3）.ie6下，a标签的的hover属性管用，其他标签的hover均失效，需要用脚本的mouseover和mouseout实现；

（4）.ie6下，透明背景的png图片失效，（背景不是透明的，而是白的）。需要把图片换成jpg格式的背景才会是透明的；

（5）ie6下z-index属性失效.如果想在一张图片上显示另一张图片，需要给这两张图片分别设置position：relative；和position：absolute以及z-index属性，但是在ie6下z-index属性失效，

网上的解决方法比较多的一种是：

但是我试了这种方式，貌似没有解决我的问题，我接着又尝试了几种方法，忠于。

我给那个在最上面的子元素设置的样式是：

他的父元素属性中一定要有一个position：relative属性，子元素在除了ie6之外的ie高版本浏览器和其他浏览器中的position属性都要设置成absolute。但是唯独在ie6中要设置成relative；此举就触发了ie6的hasLayout属性。这样，z-index属性就恢复作用啦。除此之外，子元素的z-index属性要比父元素的大。

所以上图中position：absolute属性还要写一个适配ie6的属性_position:relative;这样这个问题算搞定。

（6）ie8及以下，position:fixed;属性失效；

（7）ie8及以下，由于Quicks模式（怪异模式）的影响，盒模型的width包含了content和padding和border的宽度。但是在其他标准模式的浏览器中，width只包含了content的宽度。