返回列表

IE6 bug 之幽灵文字

默认分类 2014/08/09 09:07

实测方法5在某些情况下无效, 代码如下:

<div style="width:403px;height:200px;">
    <div style="float:left;background:red;"></div>
       <!----><!----><!---->
    <div style="float:left;width:402px;background:blue;"><span>重复文字测试</span></div>
</div>

原文地址: http://blog.sina.com.cn/s/blog_75695bd10100xfvd.html

问题重现条件:

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

2、第二个容器的宽度大于父容器的宽度,或者父容器宽度减去第二个容器宽度的值小于3(注意是小于3,当等于3时不会出现重复文字)。

3、在第二个容器前存在注释

4、多出文字个数与注释的条数有关

多出文字个数=注释条数*2-1

当多出文字个数大于容器中的字数时,多出文字消失

代码:

<div style="width:400px;height:200px;">
    <div style="float:left;background:red;"></div>
       <!---->
    <div style="float:left;width:405px;background:blue;">重复文字测试</div>
</div>

解决方法:

1、不写注释(简单直接有效的方法,但降低了代码可读性)

2、将html注释换成IE注释 或 注释不放置于 2 个浮动的区块之间。

3、在第二个容器后面加一个或者多个

来解决

其中clear 样式:

.clear{clear:both;font-size:0;height:0;}

Clear:both 和 height:0 是必须得写的font-size 可以不写(建议写,因为在ie6中div会有一个默认高度,修复了旧bug但引来了新bug,还得要解决这个IE6默认高度的bug)

针对上面的问题可以这样写

写法一:<div style="clear:both; height:0;"><!----></div>
写法二:<div style="clear:both;height:0;font-size:0;overflow:hidden;"></div> 

4、设置div的宽度,针对条件二,只要不让第二个div的宽度大于父容器,或者不让父容器减去第二个容器宽度小于3 ,就可以消除这个bug,但是这样会影响布局

5、将文字区块放在新的容器中(这种解决方法很不错,不需要刻意去修正这个bug)

<div style="float:left;width:405px;background:blue;"><div>重复文字测试</div></div>
<div style="float:left;width:405px;background:blue;"><span>重复文字测试</span></div>