IE6 bug总结

Posted 2020-09-23

IE6bug总结：

1.双边距bug产生原因
margin的方向与浮动的方向相同

解决方法：
浮动的元素身上加 display:inline;

------------------------------------------------------------

2.最小高度bug产生原因
IE6 下一个div有宽度，高度最小不是0而是字体大小

解决方法：
给 div height:0; 并且 overflow:hidden;
或者font-size:0; 并且 line-height:0;

------------------------------------------------------------

3.子级元素大于父级的时候会撑开父级【标准的浏览器超出父级不显示】

解决方法:
给父级 overflow:hidden;

------------------------------------------------------------

4.IE6不支持子级的margin负值

解决方法:
子级身上加 position:relative;

------------------------------------------------------------

5.IE5不支持margin: 0 auto属性【如：居中】（IE6支持）

解决方法:
使用定位：position:relative; left:50%; margin-left:-width/2;

------------------------------------------------------------

6.IE6中当行内元素和行内块元素（input元素）共处一行时，line-height失效

解决方法：
input 加 margin-top 等于 (父级高度-input高度20px)/2

------------------------------------------------------------

7.li不浮动，子元素浮动的时候会在每个li中间出现3像素的缝隙

解决方法：
将li设置vertical-align:top;

------------------------------------------------------------

8. IE6下 两个浮动元素，宽度都是width:100%
在浮动元素间加注释就会多出几个字

解决方法：

1.给元素加background:none;
2.在出现重复字符的盒子里面加上_margin-right:-3px;

【_属性名：属性值（_margin-right:30px）：盒子右边距离30px,如果有下划线，该属性只能被IE6支持】

------------------------------------------------------------