IE下bug

关于IE6双倍边距bug解决

（1）触发的条件： 父元素中的子元素设置了float属性 同时，在某个方向上的浮动又添加了相应的margin值
（2） 代码所得到的结果： 则在IE6浏览器中显示的是不是实际设置的margin值，而是设置的属性值的两倍
（3）修复使用的方法：在子元素中添加display:inline属性。（display:inline 或 display:block 明确其元素类型即可）

IE6中3像素问题及解决办法

（1）当元素使用float浮动后，元素与相邻的元素之间会产生3px的间隙。诡异的是如果右侧的容器没设置高度时,3px的间隙在相邻容器的内部，当设定高度后又跑到容器的相反侧了。
（2）由使用float引起，#left上加上_margin-right:-3px;_下划线专门针对IE6设置。但它不能通过W3C验证。所以最好的解决方法是把#right也设置浮动。

重复文字的BUG

（1）在某些比较复杂的排版中，有时候浮动元素的最后一些字符会出现在clear清除元素的下面。
（2）解决方法如下：
1.确保元素都带有display:inline
2.在最后一个元素上使用“margin-right:-3px
3.为浮动元素的最后一个条目加上条件注释<!–[if !IE]>xxx<![endif]–>
4.在容器的最后元素使用一个空白的div，为这个div指定不超过容器的宽度。

IE6中图片链接的下方有间隙

（1）IE6中图片的下方会存在一定的间隙，尤其在图片垂直挨着图片的时候，即可看到这样的间隙。
（2）要解决此类问题，需要将img标签定义为display:block 或定义vertical-align对应的属性。也可以为img对应的样式写入font-size:0

IE6下空元素的高度BUG

（1）如果一个元素中没有任何内容，当在样式中为这个元素设置了0-19px之间的高度时。此元素的高度始终为19px。
（2）解决的方法有四种:
1.在元素的css中加入：overflow:hidden
2.在元素中插入html注释：<!– >
3.在元素中插入html的空白符： 
4.在元素的css中加入：font-size:0

IE6下不能定义1px高度的容器

（1）触发的条件—定义一个div,将容器的高度设置成1px
（2） 编码得到的结果—在IE6浏览器中，容器的高度不是1px 而是18px
（3）出现问题的原因—是因为IE6浏览器下默认的行高
（4）解决的方法—添加属性 line-height:1px overflow:hidden; （可有可无的 属性 zoom:1;）

IE6中 z-index失效

（1）具体BUG为，元素的父级元素设置的z-index为1，那么其子级元素再设置z-index时会失效，其层级会继承父级元素的设置，造成某些层级调整上的BUG。
（2）解决办法: 给父级添加position:relative

结语：

实际上IE6中，很多BUG的解决方法都可以使用display:inline、font-size:0、float解决。

因此我们在书写代码时要记住，一旦使用了float浮动，就为元素增加一个display:inline样式，可以有效的避免浮动造成的样式错乱问题。使用空DIV时，为其加上font-size:0 这样就很容易避免一些兼容上的问题。