IE6的bug深入了解——css文字重复

工作了后接触IE6的BUG的机会多了很多，我也意识到只能根本的了解为何会触发这个BUG，如何解决，如何避免才能够节省时间，提高效率，避免加班！哈。

    于是，趁着放年假整理了一下IE6文字重复的BUG。
    首先给出段有问题的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>多了一只猪</title>
</head>
<body>
<div >
<div ></div> 
<!-- -->
<div >IE6，洗洗睡吧</div>
</div>
</body>
</html>
    为什么会触发这个BUG？因为在当多个浮动的元素紧紧跟随的时候，在中间加注释就会触犯，往往是最后一个浮动元素内的文本复制到最下面去,而溢出文字的字数=注释的条数*2-1。BUG与注释文字的位置、块区的浮动以及文字块区的固定宽度都有联系。学名叫Duplicate Characters Bug，英文好的可以查查这个学名。IE6解析得真让人蛋疼，连注释解析都容易出问题。所以HTML里尽量避免写注释吧。那如果非得要注释呢？

下面给出解决方法：
        1、不放置注释。最简单、最快捷的解决方法
　　　2、注释不要放置于2个浮动的区块之间。
　　　3、将文字区块包含在新的<div></div>之间，如：<div ><div>↓这就是多出来的那只猪</div></div>。
　　　4、去除文字区块的固定宽度，与3有相似之处。
　　　5、有的人在猪后加一个<br />或者空格，但只是消除现象。
　　　6、不要给浮动元素设置多宽度，使其不会到达包含元素的底部，或者对最后一个元素设置margin-right: -3px;或者更小。
　　　7、注释可以这样写：<!--[if !IE]>将注释放到这里<![endif]-->

posted on 2011-10-24 16:58  I am fine !  阅读(291)  评论(0)  编辑  收藏  举报