IE常见的CSS的BUG（二）

谁践踏了优雅 2022-12-06 15:50 154阅读 0赞

之前介绍过IE浏览器的几种BUG解决的方法，今天我们继续研究IE的BUG。尽管IE6即将被淘汰，但是了解这些也对将来解决问题也是有一定帮助的。好了，闲话不多说，咱们继续看IE的BUG。

**　1、IE6下PNG图片透明Bug**

Png在IE6下显示有问题，这大家都知道。有的时候IE6下，用png的图片用JQ也会出现问题，解决办法只能换成gif的。还有一个问题，使用png24或png32图片，质量是没有问题了，可引发另一个头痛的问题，就是IE6下面显示图片会有一层淡兰色的背景。

*解决办法：*

1)用滤镜解决，但是问题是使用了滤镜，链接将会失效。

CSS代码：

.img{
    	background:url('http://justflyhigh.com/img/front/ico_notice.png');
    	_background:none;
    	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://justflyhigh.com/img/front/ico_notice.png',sizingMethod='scale');
    }

或

HTML代码：

2)DD\_belatedPNG.js

可以使用DD\_belatedPNG来产现，具体实如何实现

**2、修复margin的负值**

负边距在我们平时的Web制作中，为了达到一定的效果也时常用到，而在现代浏览器中使用负的边距并不会有任何问题，但是在IE6下对负的margin值并不友好，除非你在目标元素上使用“position:relative”属性：

div {
    	margin: -20px;
    }
    * html div {
    	position: relative;
    	zoom: 1;
    }

**3、修复overflow在IE6下清浮动问题**

div {
        overflow: hidden;
        _zoom: 1;
    }

**4、IE6的固定定位**

网站上都有固定在某一个位置的需求，这时候大家首选都是固定定位，但是在IE6下就会不支持。那么怎么办呢?请往下看吧。

*解决办法：*

1)用绝对定位模拟固定定位

CSS代码：

html{height:100%;overflow:hidden; position:relative;}
    body{margin:0;height:100%;overflow:auto;}
    .page{height:2000px;}
    .box{width:200px;height:100px;background:Red; position:absolute;left:100px;top:100px;}

HTML代码：

**5、IE6下文字溢出**

若两个浮动元素之间有注释语句的话，那么在IE6下会出现溢出的文字。

CSS代码：

.box{width:400px;}
    .left{float:left;}
    .right{float:right;width:400px;}

HTML代码：

<div class="box">
    	<div class="left"></div>
    	<div class="right">↓这是多出来的一只猪</div>
    </div>

*解决办法：*

1)把注释文字在其他地方添加即可

2)在浮动元素父级元素中添加固定高度，和overflow:hidden;