1、ie6双倍边距bug
块状元素设置float(左浮动或有浮动),并且设置margin值之后,第一个浮动的元素其左侧margin值为正常的2倍,如图,可以看到第一个元素的左侧边距于其他元素两两之间的边距一致,也就是其左边距为正常边距的两倍
解决方法:给元素设置display:inline即让元素不为块状元素,如图第一个元素左侧的边距显示正常
2、ie6浏览器3像素bug
设置蓝色块状元素左浮动,红色元素不浮动,两个块元素之间会出现3像素的间隙,如图
解决方法:第二个元素也设置左浮动,如图,间隙消失
也可以使用ie6特有的hack规则,为其(左侧元素)写相应的css
_zoom:1; //zoom是ie触发Layout条件之一
margin-right:value;//value为希望的margin值
_margin-right: value-3px;
3、ie6高度问题
若ie6下字体大小为22px,设置div的高度低于22px时无效,ie认为div高度不能低于字体高度,如图设置div高度为10px,但其实际高度为22px;
解决方法
(1)设置overflow:hidden
(2)设置font-size:0px;
(3)在元素中插入html注释<!– >
(4)在元素中插入html空格
4、ie中奇数宽高bug
<style>
.parent{ position:relative; width:601px;
height:200px; background:red; color:#000; }
.children{ position:absolute; top:0; right:0; width:200px;
height:200px; background:yellow; color:#969696;}
</style>
</style>
<div class="parent">
<div class="children">
</div>
</div>
解决方案将parent的宽度改为偶数(600px),效果如图
5、ie6中图片链接下方有间隙
图片垂直挨着时,图片之间会有间隙,如图
解决方法:
display:block;
float:left;
6、重复文字bug
<div style="width:400px">
<div style="float:left"></div>
<!--这里是注释-->
<!--这里是注释-->
<!--这里是注释-->
<div style="float:right;width:400px">ie6浏览器兼容性</div>
</div>
原因是注释造成的文字溢出,且溢出的文字数=注释的条数*2-1,该bug与注释文字的位置、元素的浮动以及文字的固定宽度有关
解决方法:
(1)去掉注释
(2)不放置于浮动块之后
(3)去除文字区的固定宽度
(4)后边添加br(有几条注释就添加几个br)
7、ie6 z-index失效
父元素设置了z-index之后,子元素会继承,对自己设置的z-index置之不理
解决方法:
position的relative改为absolute
浮动元素添加position
去除浮动