IE6下的多余字符bug的2种情况和解决办法

情况一：

#content {width:774px;}
.title {
display:block;
float:left;
width:50%;
margin-bottom:12px;
color:red;
}
.intro {
display:block;
float:left;
width:50%;
margin-bottom:12px;
color:#999;
}

<div id="content">
<span class="title">标题1</span><span class="intro">介绍1</span>
<span class="title">标题2</span><span class="intro">介绍2</span>
<span class="title">标题3</span><span class="intro">介绍3</span>
</div>

IE6下效果：



解决办法：

　　1.介绍1或介绍2或介绍3 的最后字符后添加空格，测试时发现在最后添加换行也可以。

　　2.讲介绍1或者介绍2的span换成div。

　　3.在3行中任意一行外 或者是 介绍1或介绍2或介绍3 外嵌套一层div，但这样如果造成无意义的嵌套，会影响结构，个人不推荐。

　　4.给父层加zoom:1;

个人感受：

　　遇到这个bug是很偶然的，解决办法是测试出来的，我也是不知其所以然；还有造成这个bug的原因，还请各位知道的大大不吝赐教。

情况二：

div {
width:100%;
float:left;

}

<div>文本行1</div><!---->
<div>文本行2</div>
<div>文本行3</div><!---->
<div>文本行4</div>

IE6下显示效果：



可以看到，如果继续添加更多的注释，会继续余出更多的字符，如此重复。当最后一行字符长度超过时会显示更奇怪的字符，甚至显示脚本错误提示。

造成原因：浮动元素中添加注释。

解决办法：

　　1.不要在浮动元素中间添加注释。

　　2.在重复的行尾加个  空格字符

　　3.再循环最后加入一个<div style="clear: both; height: 0pt; overflow: hidden;"></div>

个人感受：

　　这个bug还是比较常见的，后面的2个方法都是网上的童鞋提供的。