IE6下的 CSS 和 HTML 注意事项

1, 关于图片

IE6只支持8位的PNG透明图片，所以，所有透明图片，需要转换成GIF格式的才能正常显示。

 

2,关于float以后的margin-left双倍问题

所有float:left后面，都要加上

display:inline;

 

3,float以后，撑开边框的方法

在float层的父层，加上：

#main-body:after {

    content: "";

    height: 0;

    display: block;

    clear: both;

}

如果上述方法无效的话，在float的层最后，加一个DIV层

<div style="clear:both"></div>

例如：

 

<div class="float-father">
     <div class="float-left">......</div>
     <div class="float-left">......</div>
     <div style="clear:both"></div>
</div>

 

4, padding-left and margin-left感觉都失效的问题

使用之前，需要在父层定义：

text-align:left;

同样的，如果想要使用padding-right,父层也不许加上定义

text-align:right;

 

5，关于javascript:void(0)

估计写ajax，现在很多人都会用到这个，但是在IE6，在a标签的href属性中使用javascript:void(0)，会导致一定的bug。

例如：gif格式的动态图片突然没反应了

解决方法：避免a标签与javascript：的混合使用。比如，可以用span标签和css代码伪装一个超链接

 

a-link-span {
    color: #8d9393;/*使用定义的超链接颜色*/
    cursor: pointer;/*鼠标经过图层变成小手状*/
}

 

 

6. DIV 的高度失效问题

因为IE6 默认的字体显示大小在12-14px之间，当DIV的高度小于这个值的时候，IE6就会自作聪明把数值调大= =+

解决方法是加一个font的值：

font-size: 0px;

 

7. font-size: 13px失效问题

IE6 不能识别这个，解决方法是换成font-size: 9pt

 

8. min-height的问题

IE6 不能识别min-height，但是当高度超过height值时，它会自动加高。解决方法是。另外需要注意的是，设置了min-height的话，父层的overflow不能设置成hidden

min-height: 300px;

height: auto !important;

height: 300px;

 

9. li 左边的小圆点有时候去不掉

IE 6下，彻底去掉list-style要用：

list-style: none outside none;

 

10. position fix失效的问题

IE 6下的做法是：

postion:absolute;

bottom:auto;

top:expression(eval(document.documentElement.scrollTop));

 

11. input相同size下，text和password宽度不同的问题

这个是由于字体问题引起的，解决方法：

input{font-family:'Verdana';}

 

12. :hover失效问题

IE 6下，只有a支持:hover。尽量避免在其它标签内使用hover，必须用的话，用动态修改class实现

 

13. position:absolute 绝对定位偏移的问题

这个问题最近头疼死我了……ORZ

要注意的有两点，一个是absolute的父层最好定义成relative。另一个是，left要定义成0。就是IE6 和IE7下，绝对定位要把上/下，左/右都定义了。

 

14.float的层会另起一行的问题。

这个问题也哭死我了……ORZ，特别是，当要用float：right的时候。

解决方法一：把float：right的层放在前面，但是这样有时会影响语意，我对代码有洁癖，不喜欢这方法= =

解决方法二：把float:right的前面一层设置成float:left。但是这样就要考虑撑开父层的方法，代码量也比较多。总之都很纠结= =。