IE常见的CSS的BUG（二）

之前介绍过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代码：

<img src="http://justflyhigh.com/img/front/ico_notice.png" width="247" height="216" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://justflyhigh.com/img/front/ico_notice.png', sizingMethod='scale');" alt="梦龙小站" />

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代码：

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;}

5、IE6下文字溢出

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

CSS代码：

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

HTML代码：

<div class="box">
	<div class="left"></div><!--IE6下文字溢出bug-->
	<div class="right">↓这是多出来的一只猪</div>
</div>
<!--
	不要再两个浮动元素加注释
-->

解决办法：

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

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