IE6出现重复字符的bug解决方法

今天当当榜http://bang.dangdang.com上线,突然发现“图书音像类榜单”下面多出一个“更多>>”,

 

IE6出现重复字符的bug解决方法_第1张图片

起初以为是没有将> 替换为>的缘故,更新后发现,并不是这个问题。

 

之前记得在测试环境下没有发现这个问题呀,我把“影视畅销榜”栏删除以后,“更多”不见了。

 

问题找到了,是由于里边的容器的宽度超过了外边容器导致的。将右边距10px改为9px,搞定。  O(∩_∩)O~

 

 

从网上搜了下,ie6也确实存在这个bug:

 

一个容器包含2两个具有“float”样式的子容器。第二个容器的宽度大于父容器的宽度,或者父容器宽度减去第二个容器宽度的值小于3。(说到3,这里稍微多说一句——IE7还修正了IE6中的一个bug,bug名字就叫做“3像素bug”)
在第二个容器前存在注释(这也是为什么此bug也叫做“IE6注释bug”的原因)。

<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="YES!B/S!,web标准,c柴春燕,CSDN,实例代码" /> <meta name="Description" content="ie6 负3像素bug, http://blog.csdn.net/spring21st" /> <title>IE6 下出现重复字bug</title> </head> <body> <div style="width:200px;"> <div style="float:left;" mce_style="float:left;"></div> <!-- 如果是IE6,你将多看到一个“影”字 --> <div style="float:left;width:200px;">歌剧院的魅影</div> </div> </body> </html>


为何会出现重复文字
bug虽然的的确确的存在,但是为什么会出现这样的bug依然没有统一的定论。不同的高手也是各执一词,谁也说服不了谁。真正的原因也许只有当时的IE6团队才能道出来,但是现在仍然没有官方的说法。下面列出来的这两种说法,是只是现在网上认可度比较高的而已——

IE6浏览器对<!-- -->注释的解释存在bug引起的。
“3像素bug”的扩展后遗症。(“3像素bug”我们将在《IE7的web标准之道》系列以后的文章中讲到)
其他的一些说法

如何消灭重复文字
引起的原因,也许我们可以不知道,但是如何去消除却是我们一定要关注的。
“歌剧院魅影bug”已经在IE7中得到修正,在FireFox和Opera中也不会出现,所以bug的修正主要是针对IE6的。

针对于上文中讲到的“bug重现条件”,如果要修正bug,只要让任何一个条件不满足即可——

改变结构,不出现【一个容器包含2两个具有“float”样式的子容器】的结构。
——此解决方案的评论:疯了!因噎废食的做法。
减小第二个容器的宽度,使父容器宽度减去第二个容器宽度的值大于3,例如将本文示例中第二个子容器的宽度改为197px。
——此解决方案的评论:在满足页面布局的前提下可以使用。但是当情况比较复杂的时候,可能实施起来比较困难。
去掉所有的注释。
——此解决方案的评论:最直接的做法,但是“没有注释的代码”,的确不是一个好的代码写作习惯。
修正注释的写法。将 <!-- 这里是注释内容 -->写成<!--[if !IE]>这里是注释内容<![endif]-->
——此解决方案的评论:还不错的解决方案,但是并不是每个人都对<!--[if !IE]>这里是注释内容[endif]-->这种注释写法很欣赏。
在第二个容器后面加一个或者多个<div style="clear"></div>来解决。
——此解决方案的评论:另人感觉很不爽的解决方案。但是的确能解决。影响网页效率

 

 

你可能感兴趣的:(IE6出现重复字符的bug解决方法)