解决IE文字重复显示BUG

下面只有五个前（在IE6下多了一个前）

发生条件:

CSS中用了float属性,并且用了html注释<!-- 注释 -->，

补充说明：这个多文字bug在IE7和还在处于beta版的IE8已经得到解决。

 

下面给出解决方法
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
代码：

<div style="width:200px;">
        <div style="float:left;"></div><!-- 在IE6下数一下有多少个前 -->
        <div style="float:left;width:200px;">前前前前前</div>
        <div style="clear:both;"></div>
</div>

 

前前前前前

 

---

解决方法一:在父级容器加入：display:inline;

代码：
<div style="width:200px;display:inline;">
        <div style="float:left;"></div><!-- 在IE6下数一下有多少个前 -->
        <div style="float:left;width:200px;">前前前前前</div>
        <div style="clear:both;"></div>
</div>

 

前前前前前

 

---

解决方法二:在子级容器去掉注释

代码：
<div style="width:200px;">
        <div style="float:left;"></div>
        <div style="float:left;width:200px;">前前前前前</div>
        <div style="clear:both;"></div>
</div>

 

前前前前前

---

其他网站搜集的解决办法

一、 去除<div style="float:left"></div> 中的“float:left;”，你会页面正常显示。
同样去除 <div style="float:right;width:400px">中的“float:right;”，页面正常显示。

解决：可使用display：block；display：inline-block；display:inline等组合替代float功能

二、注释造成文字溢出与其位置有关。注释造成文字溢出与文字区块的固定宽度有关。

解决：去除注释或者固定宽度；采用百分比宽度代替，注释不用放置在浮动区块之间。