【IE6的疯狂之四】IE6文字溢出BUG

在IE6下使用浮动可能会出现文字重复的情况.

在IE6下,浮动层之间有注释文字的话,之前那个浮动层的内容文字就有可能遭遇一个“隐形”的复制,但是代码里查看文字可并没有多出来。

看个例子:

XML/HTML代码
  1. <!DOCTYPE?html?PUBLIC?”-//W3C//DTD?XHTML?1.0?Transitional//EN”?”https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>??
  2. <html?xmlns=“https://www.w3.org/1999/xhtml”>??
  3. <head>??
  4. <meta?http-equiv=“Content-Type”?content=“text/html;?charset=gb2312”?/>??
  5. <title>多了一只猪</title>??
  6. </head>??
  7. <body>??
  8. ????<div?style=“width:400px”>??
  9. ????????<div?style=“float:left”></div>? ??
  10. ????????<!–?_?–>??
  11. ????????<div?style=“float:right;width:400px”>↓这就是多出来的那只猪</div>??
  12. ????</div>??
  13. </body>??
  14. </html>??

用IE6看一下,你会发现真的会多出一只“猪”!

问题原因以及解决方法:

原因:
由注释造成文字溢出,属于IE6的BUG,溢出文字的字数=注释的条数*2-1,这里的字数在中文或英文数字时都成立。注释坐在位置与溢出位置、区块的浮动以及文字区块的固定宽度有必然联系。

解决办法:
1、不放置注释。最简单、最快捷的解决方法;
2、注释不要放置于2个浮动的区块之间;
3、将文字区块包含在新的<div></div>之间,如:<div?style=”float:right;width:400px”><div>↓这就是多出来的那只猪</div></div>;
4、去除文字区块的固定宽度,与3有相似之处;
5、在后面加一个<br?/>或者空格;(不推荐)
6、使用IE注释格式,如:<!–[if?!IE]>Put?your?commentary?in?here…<![endif]–>
7、给盒子加position:relative;属性



引发这种BUG有几个条件
1.是注释引起的,删除所有注释即可.
2.hidden的input直接放在form下.
3.display为none的div也有可能引发此bug.
2,3可以通过外面再包一次DIV解决

赞(0) 打赏
未经允许不得转载:WEBTian开发 » 【IE6的疯狂之四】IE6文字溢出BUG

评论 17

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    没看到效果,什么多出一只猪,没有多呀。我看的效果

    zhaoht10年前 (2009-04-29)回复
  2. #-48

    如果有多条注释~会出现若干个字,那么每嵌套一层div就去掉一个字~
    崩溃的IE6~~

    9年前 (2009-11-08)回复
  3. #-47

    顶一下,这个问题我就遇到过,感觉出来了肯定是因为标签不规则引起的,可没想到是IE6所导致的标签复制问题。

    9年前 (2009-12-20)回复
  4. #-46

    万恶的IE6,真把我害苦了!

    8年前 (2010-11-12)回复
  5. #-45

    有个最简单的解决办法,找到出问题的li上面的ul所在的最外层有float样式的父元素,给它下面加个清除浮动的div,。。话比较长,细细体会一下。。如图: li -> ul -> n层 ->最外层div

    比如说,页面的右侧边栏肯定是设置了float:right或者float:left,这时,如果在它下面的列表li中在ie6下面出现了溢出问题,就可以在右侧边栏下面设置一个清除浮动样式的div,,这样li中的问题就会得到解决。

    测试有效。。

    刀了斯8年前 (2011-04-07)回复
  6. #-44

    不错,去掉注释是最简单的办法

    力哥7年前 (2011-12-15)回复

Tian开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏