ie6浏览器兼容性

时间:2022-08-26 15:07:12

1、ie6双倍边距bug

块状元素设置float(左浮动或有浮动),并且设置margin值之后,第一个浮动的元素其左侧margin值为正常的2倍,如图,可以看到第一个元素的左侧边距于其他元素两两之间的边距一致,也就是其左边距为正常边距的两倍

ie6浏览器兼容性

解决方法:给元素设置display:inline即让元素不为块状元素,如图第一个元素左侧的边距显示正常

ie6浏览器兼容性

2、ie6浏览器3像素bug

设置蓝色块状元素左浮动,红色元素不浮动,两个块元素之间会出现3像素的间隙,如图

ie6浏览器兼容性

解决方法:第二个元素也设置左浮动,如图,间隙消失

ie6浏览器兼容性

也可以使用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;

ie6浏览器兼容性

 

解决方法

(1)设置overflow:hidden

(2)设置font-size:0px;

(3)在元素中插入html注释<!– >

(4)在元素中插入html空格 &nbsp;

ie6浏览器兼容性

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>

ie6浏览器兼容性

解决方案将parent的宽度改为偶数(600px),效果如图

ie6浏览器兼容性

5、ie6中图片链接下方有间隙

图片垂直挨着时,图片之间会有间隙,如图

ie6浏览器兼容性

解决方法:

display:block;

float:left;

ie6浏览器兼容性

6、重复文字bug

<div style="width:400px">
  <div style="float:left"></div>
  <!--这里是注释-->
  <!--这里是注释-->
  <!--这里是注释-->
  <div style="float:right;width:400px">ie6浏览器兼容性</div>
</div>

ie6浏览器兼容性

原因是注释造成的文字溢出,且溢出的文字数=注释的条数*2-1,该bug与注释文字的位置、元素的浮动以及文字的固定宽度有关

解决方法:

(1)去掉注释

(2)不放置于浮动块之后

(3)去除文字区的固定宽度

(4)后边添加br(有几条注释就添加几个br)

ie6浏览器兼容性

 

7、ie6 z-index失效

父元素设置了z-index之后,子元素会继承,对自己设置的z-index置之不理

解决方法:

position的relative改为absolute

浮动元素添加position

去除浮动