Students who develop front-end must know that IE6 is the most compatible browser with bugs, and it does not support PNG alpha channel. The parsing and comprehension specifications of its documents have also caused many annoying bugs, and sometimes even make people feel hopeless. This article mainly explains some of the IE6 bugs that are relatively easy to encounter, and how to solve them.
1. IE6 double margin bug
When an element on the page is floated using float, either left or right; as long as the element has a margin in pixels the value will be multiplied by 2, e.g. "margin-left:10px" In IE6, the value will be is parsed to 20px. To solve this bug, you need to add display:inline or display:block to the element to clarify its element type to solve the double margin bug
Second, the 3 pixel problem in IE6 and the solution
When the element is floated with float, there will be a 3px gap between the element and the adjacent element. The weird thing is that if the height of the container on the right is not set, the 3px gap is inside the adjacent container, and when the height is set, it runs to the opposite side of the container. To solve this kind of bug, you need to add float to the elements of the layout on the same line.
3. BUG of odd width and height in IE6
In IE6, there is a certain difference between the display size of odd height and width and the display size of even number. The main problem is the odd height and width. To solve such problems, just try to write the height and width of the externally positioned div as an even number.
4. There is a gap below the image link in IE6
There will be a certain gap below the picture in IE6, especially when the picture is vertically next to the picture, you can see such a gap. To solve such problems, you need to define the img tag as display:block or define the property corresponding to vertical-align. You can also write font-size:0 for the style corresponding to img
5. Height BUG of empty elements under IE6
If an element has no content, when a height between 0-19px is set for this element in the style. The height of this element is always 19px.
There are four solutions:
1. Add to the CSS of the element: overflow:hidden
2. Insert html comments in elements: <!-->
3. Insert html whitespace in the element:
4.在元素的css中加入：font-size:0
六、重复文字的BUG
在某些比较复杂的排版中，有时候浮动元素的最后一些字符会出现在clear清除元素的下面。
解决方法如下：
1.确保元素都带有display:inline
2.在最后一个元素上使用“margin-right:-3px
3.为浮动元素的最后一个条目加上条件注释，<!–[if !IE]>xxx<![endif]–>
4.在容器的最后元素使用一个空白的div，为这个div指定不超过容器的宽度。
七、IE6中 z-index失效
具体BUG为，元素的父级元素设置的z-index为1，那么其子级元素再设置z-index时会失效，其层级会继承父级元素的设置，造成某些层级调整上的BUG。详细解释可以阅读IE6中部分情况下z-index无效的原因，以及解决办法
结语：实际上IE6中，很多BUG的解决方法都可以使用display:inline、font-size:0、float解决。因此我们在书写代码时要记住，一旦使用了float浮动，就为元素增加一个display:inline样式，可以有效的避免浮动造成的样式错乱问题。使用空DIV时，为了避免其高度影响布局美观，也可以为其加上font-size:0 这样就很容易避免一些兼容上的问题。