IE6中常见的CSS bug大总结以及解决方法

发布时间:2020-11-04编辑:脚本学堂
本文列举了ie中经常遇到的CSS bug以及解决方案,需要的朋友参考一下。

1.IE6双倍边距bug
当页面内有多个连续浮动时,如果图标列表是采用左浮动,设置li的左侧margin值时,在最左侧呈现双倍情况。如外边距设置为10px, 而左侧则呈现出20px,解决它的方法是在浮动元素上加上display:inline;的样式,就可避免双倍边距bug。

2.3像素问题及解决办法
当使用float浮动容器后,在IE6下会产生3px的空隙,有意思的是右侧容器没设置高度时3px在右侧容器内部,当设定高度后又跑到容器的左侧了。

3.当子元素浮动且未知高度时,怎么使父容器适应子元素的高度?
此可在父窗口加上 overflow:auto;zoom:1;这两个样式属性,overflow:auto;是让父容器来自适应内部容器的高度,zoom:1;是为了兼容 IE6而使用的CSS HACK。zoom:1;通不过W3C的验证,幸好IE支持<!--[if IE]>这种写法,可以专门针对IE来写单独的样式,所以可以把这个属性写在页面内的<!--[if IE]>中,这样可以通过验证了。

4.超链接访问过后hover样式就不出现的问题
被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A
 

a:link {color: #1f3a87; text-decoration:none;}
a:visited {color: #83006f;text-decoration:none;}
a:hover {color: #bc2931; text-decoration:underline;}
a:active {color: #bc2931;}

5.IE6下这两个层中间怎么有间隙
这个IE的3PX BUG也是经常出现的,解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left margin-right:-3px;

6.IE6文字溢出BUG
备注:注释造成文字溢出是IE的BUG。

7.IE6中奇数宽高的BUG
IE6还有奇数宽高的bug,解决方案就是将外部相对定位的div宽度改成偶数。

8.IE6下为什么图片下方有空隙产生
解决这个BUG的方法也有很多,可以是改变html的排版,或者定义img 为display:block,或者定义vertical-align属性值为vertical-align:top | bottom |middle |text-bottom
也可以设置父容器的字体大小为零,font-size:0

9.ie6下空标签高度问题
一个空div如果高度设置为0到19px,IE6下高度默认始终19PX。
例如:
.c{background-color:#f00;height:0px;/*给定任何小于20px的高度 */}
<div class="c"></div>
如果不让它默认为19PX。而是0PX的话。解决方法有3种:
1.css里面加上overflow:hidden;
2.div里面加上注释,
<div class="c"><!– –></div>
3.css里面加上line-height:0;然后div里面加上#nbsp;
<div class="c">&nbsp;</div>(#换成&)

10.修正重复文字bug
复杂的布局可以触发在浮动元素的最后一些字符可能出现在清除元素下面的bug。这里有几个解决方法:
确保所有的元素使用”display:inline;”
在最后一个元素上使用一个”margin-right:-3px;”
# 为浮动元素的最后一个条目使用一个条件注释,比如:<!–[if !IE]>Put your commentary in here…<![endif]–>
在容器的最后元素使用一个空的div(它也有必要设置宽度为90%或类似宽度。)