纸上得来终觉浅,绝知此事要躬行。

 

解决在IE6下文字溢出(多出一行字)的问题

通常,一个容器包含2两个具有“float”样式的子容器。 第二个容器的宽度大于父容器的宽度,或者父容器宽度减去第二个容器宽度的值小于3。 在第二个容器前存在注释(这也是为什么此bug也叫做“IE6注释bug”的原因)。

 为何会出现重复文字

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

IE6浏览器对注释的解释存在bug引起的。

“3像素bug”的扩展后遗症。(“3像素bug”我们将在《IE7的web标准之道》系列以后的文章中讲到)

其他的一些说法

 如何消灭重复文字

引起的原因,也许我们可以不知道,但是如何去消除却是我们一定要关注的。

“歌剧院魅影bug”已经在IE7中得到修正,在FireFox和Opera中也不会出现,所以bug的修正主要是针对IE6的。

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

改变结构,不出现【一个容器包含2两个具有“float”样式的子容器】的结构

 

 

注释bug,经典的ie 6 bug。

说明:注释造成文字溢出是IE的BUG,注释造成文字溢出与其位置有关,注释造成文字溢出与文字区块的固定宽度有关,溢出文字的字数=注释的条数*2-1,这里的字数在中文或英文数字时都成立。

当溢出的文字字数大于文本的字数时,文字区块将会消失。

解决方法:

1、不放置注释(就是把那个块里面的所有注释都给删除了)。最简单、最快捷的解决方法,嘿嘿……
2、注释不要放置于2个浮动的区块之间。
3、将文字区块包含在新的<div></div>之间,如:<div style="float:right;width:400px"><div>↓这就是多出来的那只猪</div></div>。
4、去除文字区块的固定宽度,与3有相似之处。

 

posted on 2010-08-25 15:49  JRoger  阅读(884)  评论(0编辑  收藏  举报

导航