【转】IE6下DIV容器中双Float元素字符重影bug(IE6重复文字bug)

Home » CSS » Html » web开发 » 【转】IE6下DIV容器中双Float元素字符重影bug(IE6重复文字bug)

Archives

文件夹

转载前说明:感谢作者,我终于找到个说法了,之前因为没有相关资料一直是通过改变代码结构来解决该问题的,现在看到这些总结也总算不会无计可施,同样碰到问题的同学有福了。

转载自:http://www.yuzi.me/Share/ie6floatbug.html

ie6floatbug1

IE7 的web标准之道IE历来被web标准的拥护者所诟病,而当FireFox横空出世以后,更多的网页制作者开始关注web标准设计。看着FireFox的 市场占有率不停的上升,微软终于推出了IE7。但IE7是否真的能够力挽狂澜,是否真的能够得到用户的信任,是否真的能够得到网页设计者的认可呢?

估 计很多的朋友都是因为这个华丽的“重复文字”一词进来的,其实这纯粹是一个bug作为。这个bug在国际上比较获得认可的名字叫做——“IE6重复文字 bug”。这是一个非常好玩但是有很令人摸不到头脑的bug。如果,你不知道产生原因的话,将会令人非常头痛。这也是我在现实工作中真正遇到过的情况。

测试一下:复制以下代码放IE6下测试

<!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=”author” content=”Yuzi,煜子,网页设计师网站” />
<meta name=”Copyright” content=”Yuzi,煜子” />
<title>IE6重复文字bug</title>
</head><body><div style=”width:200px; height:100px; padding-left:70px;”><div style=”float:left;”></div>
<!–如果是IE6,你将多看到一个“影”字–>
<div style=”float:left; width:200px;”>IE6下DIV容器中双Float元素字符重影</div>
</div>
</body>

下面是测试页面分别在IE6,IE7,IE8,FireFox(火狐浏览器),Chrome(谷歌浏览器),Oepra以及Safari(苹果浏览器)中显示效果截图

ie6floatbug2

通过截图,你会惊讶的看到在IE6中,多出了一个“影”字。下面来讲讲出现这个“影”字的一些条件(bug重现条件)

一个容器包含2两个具有“float”样式的子容器。

第二个容器的宽度大于父容器的宽度,或者父容器宽度减去第二个容器宽度的值小3(说到3,这里稍微多说一句——IE7还修正了IE6中的一个bug,bug名字就叫做“3像素bug”)

在第二个容器前存在注释(这也是为什么此bug也叫做“IE6注释bug”的原因)

为何会出现重影

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

说法一:

IE6浏览器对<!– –>注释的解释存在bug引起的。“3像素bug”的扩展后遗症。

说法二:

其他的一些说法,如何消灭重影 引起的原因,也许我们可以不知道,但是如何消除却是我们一定要关注的。”重影bug”已经在IE7中得到修正,在FireFox和Opera中也不会出现,所以bug的修正主要是针对IE6的。

针对于上文中讲到的“bug重现条件”,如果要修正bug,只要让任何一个条件满足即可。有些网友对IE6 重影bug做出了一些想法及议论。

解决方法一:

改变结构,不出现【一个容器包含2两个具有“float”样式的子容器】的结构。
此解决方案的评论:疯了!因噎废食的做法。

解决方法二:

减小第二个容器的宽度,使父容器宽度减去第二个容器宽度的值大于3,例如将本文示例中第二个子容器的宽度改为197px。
此解决方案的评论:在满足页面布局的前提下可以使用。但是当情况比较复杂的时候,可能实施起来比较困难。

解决方法三:

去掉所有的注释。
此解决方案的评论:最直接的做法,但是“没有注释的代码”,的确不是一个好的代码写作习惯。

解决方法四:

修正注释的写法。将 <!– 这里是注释内容 –>写成<!–[if !IE]>这里是注释内容<![endif]–>
此解决方案的评论:还不错的解决方案,但是并不是每个人都对<!–[if !IE]>这里是注释内容[endif]–>这种注释写法很欣赏。

解决方法五:

在第二个容器后面加一个或者多个<div style=”clear”></div>来解决。
此解决方案的评论:另人感觉很不爽的解决方案,但是的确能解决,影响网页效率。

关于此bug的一些文章资料,其实很早以前就有外国的朋友关注过这个bug,而且在中国也有过一些朋友关注过这个bug。我在写这篇文章的时候,也一定程度上参照了他们的研究成果,在此向研究此问题的前辈们表示感谢。

发表评论