Css在IE6浏览器里的一些弊端和解决方法

此文出自：K.N.J的博客

 

有很多时候，如果使用的浏览器的版本不够，会导致一些CSS属性无法发挥出应有的作用，结合自己碰到和网上的一些情况，做了一些对会在IE6及更早浏览器里出现的问题的归类及解决方法。

1.浮动时产生双倍边距。

如果再IE6及更早的浏览器中出现浮动后margin的值表现出双倍的情况，可以将此元素的display设置为inline就可以了。

如：#text{display:inline}

2.定义小高度的容器

有时在IE6及更早浏览器中无法直接定义较小高度的容器，那是因为都有默认的行高。这个时候要用到overflow这个属性，并设置为hidden才可以。

如：#text{overflow：hidden;height:1px;font-size:0;line-height:0;}

3.模拟min-height效果

这个时候，我们不能再将#text中的overflow设置为hidden了，否则min-height就没有任何作用了。

正确的方法是：#text{min-height:120px;_height:120px;}

4.解决当li中出现2个或以上的浮动，li之间会产生空白间隙的问题

如何消除IE6或更早浏览器中li之间的间隙，可以使用top这个属性值，也可以设置为text-top|middle|bottom|text-bottom,甚至还可以设置<length><percentage>的值。

其中之一的例子是：li{vertical-align:top}

5.解决使用滤镜PNG图片透明后，容器内链接失效的问题。

要解决这个问题，就必须要问容器内的链接定义相对定位属性position的值为relative。

实例为：div{width:200px;height:100px;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’*.png’);}

a{_position:relative}

............

...............

...................更多IE6中的bug及修补方法，请点击：K.N.J's blog

 

更多关于html方面的资料，请参阅：K.N.J的博客