IE6的条件注释语句:

<!-- [if IE6]>
    <link href="ie6.css" rel="stylesheet" type="text/css">
<![endif]-->

不支持PNG图片透明度

问题:

PNG文件格式最大的优点是支持alpha透明度。但是IE6并不直接支持PNG透明度,IE7及其以上版本浏览器则支持。

解决办法:

对于IE6,可使用IE专有的AlphaImageLoader过滤器。

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="image.png", sizingMethod="crop");

但是这行代码会导致css无效,所以最好把它放在IE6专用的样式表中。

双外边距浮动

问题:

IE中浮动元素的外边距加倍;

解决办法:

给浮动元素设置display属性为inline或者inline-block。

3像素文本偏移

问题:

当文本与浮动元素相邻时,IE6中就会出现3像素的文本偏移bug。

解决方法:

首先给包含文本的元素设置任意的高度,这回迫使元素拥有布局,这会在表面上消除文本偏移(因为IE6会将height作为min-height对待,所以设置一个小的高度并不会影响元素在浏览器中的实际尺寸);

然后将文本元素的外边距重新设置为0,并为浮动元素的设置一个-3px的右边距(假设文本元素在浮动元素的右边)。

重复字符

问题:

在IE6中,一系列浮动元素的最后一个元素中的最后几个字符会在浮动元素下面重复出现。当在一系列浮动元素的第一个和最后一个元素之间有多个注释时,就会出现这个bug。前两个注释没有影响,但是后续的每个注释会导致两个字符重复出现。

解决方法:

可以通过设置负的右外边距从最后一个浮动元素上去掉3px,或者使容器扩大3px。
避免这个bug出现的最容易、最安全的方法是从HTML中删除注释。

相对容器中的绝对定位

问题:

bug产生的原因在于相对定位元素没有获得IE/Win的内部hasLayout属性,因此它们不创建新的定位上下文,所有绝对元素相对于视口进行定位。

解决方法:

可通过迫使相对定位的容器拥有布局。

一种方法是在容器上显式地设置width和height。

另一种方法是通过使用条件注释过滤IE6,为容器布局提供一个任意的高度。如:height: 1%。

本文作者:子匠_Zijor,转载请注明出处:http://www.dengzhr.com/frontend/css/296