IE6常见CSS解释BUG及hack

1、图片有边框bug

hack:

给图片添加border:0或border:0 none。

2、图片有间隙

hack1:

将div与img并排写在一行。

hack2:

将img转为块状元素,即添加声明display:block。

3、dt,li中图片有间隙

hack:

将img转为块状元素,添加声明display:block。

4、双倍浮动(双倍边距,只有IE6出现)

hack:

给浮动元素添加声明display:block。

5、默认高度(IE6,IE7)

hack1:

给元素添加声明font-size:0。

hack2:

给元素添加声明overflow:hidden。

6、表单元素行高对齐不一致

hack:

给元素添加声明float:left。

7、按钮元素大小不一

hack1:

用a标签模拟。

hack2:

input外边套一个标签,在这个标签里写按钮的样式,把input边框去掉。

hack3:

若按钮为图片,直接把作为按钮背景图即可。

8、百分比bug(50%+50%)>100%

hack:

给元素添加声明:

clear:right,clear:left,clear:both。

9、鼠标指针bug

cursor属性hand值,IE9+

cursor属性point值,IE6+

hack:若统一某元素鼠标指针为手型,则添加声明:cursor:point。

10、透明度属性

兼容其他浏览器写法,opacity:value。

hack2:

filter:alpha(opacity:value),IE浏览器。

11、li列表的bug

当父元素li有float:left时,子元素a没设置浮动的情况下,会出现垂直bug。

hack:

给父级元素li和子元素a设置浮动。

当给li中的a转成block,并且都有height,并都有float的,li中没有设置浮动,会出现阶梯显示。

hack:

同时给li加float。

12、当前元素(父元素内第一个元素)与父元素没有设置任何浮动的情况下,设置margin-top后,会错误的把margin-top加在父级元素上。

hack1:给父元素添加overflow:hidden。

hack2:给父元素或子元素添加浮动。

13、margin bug

当两个上下排列的元素,上元素有margin-bottom:30px,下元素有margin-top:30px时,他们中间的距离不会叠加,而且会设置为较大的值。

原文地址:https://www.cnblogs.com/zhangshaofeng/p/9362734.html