IE6浏览器的bug问题及相关解决的方法
1、css浮动边距加倍错误(双倍边距BUG)的解决办法 该错误只影响ie而不影响其他浏览器,我们可以考虑用hack来解决!!! 解决方法:_display:inline;
2、扩展框问题 原因:无法将内容放入固定宽度或固定高度的框中,则框会扩展以适应内容,而不是让内容溢出框外。解决方法:overflow: hidden
3、png图片的问题, IE6一下版本不支持png图片的格式;
4、三像素文本慢移 Ie6里面的banner部分折成三行, 解决方法:在IE6中让最后一个盒子减少三个像素,这就需要用到!important这个关键字了(让其它盒子也可以,那个方便就设那个)或者:zoom:1;
5.在IE6里,浮动元素的子元素如果定义了高度,则其子元素的宽度是其上一个不浮动的祖先元素的100%,
解决方法:一是不给其子元素设固定高度(只设行高),二是也让这个子元素变成浮动元素。
7、一个空格引发CSS失效 这段代码对<p>的首字符样式定义在IE6上看是没有效果的(IE7没测试),而在p:first-letter和{font-size:300%}加上空格,也就是p:first-letter {font-size:300%}后,显示就正常了。但是同样的代码,在FireFox下看是正常的。按道理说,p:first-letter{font-size:300%}的写法是没错的。那么问题出在哪里呢?答案是伪类中的连字符"-"。IE有个BUG,在处理伪类时,如果伪类的名称中带有连字符"-",伪类名称后面就得跟一个空格,不然样式的定义就无效。而在FF中,加不加空格都可以正常处理。
8、超链接访问过后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;}
9、IE6的双倍边距BUG 浮动后本来外边距10px,但IE解释为20px,
解决办法是加上display:inline
10、IE6下这两个层中间怎么有间隙 这个IE的3PX BUG也是经常出现的,解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left margin-right:-3px;
12、IE6中奇数宽高的BUG IE6还有奇数宽高的bug,解决方案就是将外部相对定位的div宽度改成偶数。
13、IE6下为什么图片下方有空隙产生 解决这个BUG的方法也有很多,可以是改变html的排版,或者定义img 为display:block 或者定义vertical-align属性值为vertical-align:top | bottom |middle |text-bottom 还可以设置父容器的字体大小为零,font-size:0
14、IE6下DIV高度显示的Bug IE6下默认的字体尺寸大致在12 - 14px 之间,当你试图定义一个高度小于这个默认值的 div 的时候, IE 会固执的认为这个层的高度不应该小于字体的行高。所以即使你用 height: 6px; 来定义了一个 div 的高度,实际在 IE 下显示的仍然是一个 12 px 左右高度的层。
要解决这个问题,可以强制定义该 div 的字体尺寸,或者定义 overflow 属性来限制 div 高度的自动调整。比如 <div style="height: 6px; font: 0pxArial;"></div> 或者 <div style="height: 6px; overflow:hidden;"></div> 都可以阻止 IE 的自作聪明。
该问题在 IE7 / Firefox /Opera 下均不存在。