IE6文字溢出的bug

前几日在写一个页面时,碰到了一个ie6的bug,浮动层之间如果有注释,则在最后一个元素的文字内容会溢出。

测试详细代码如下(请用ie6查看):

<!– code  –>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>首页</title>

<style type="text/css">
body { font-size: 12px; color: #333; font-family: Arial, Verdana, Helvetica, sans-serif; min-width: 1002px; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .clearfix { height:1%; }
.uclearfix { display:block; }
/* end clearfix */

.content-sider { width: 402px; float: left; background: #f2ecec; }
.content-fine-list { width: 392px; padding-left: 10px; }
.content-fine-list .list-item { width: 196px; margin-top: 16px; float: left; }
.content-fine-list .list-item h5  { width: 100%; color: #185d7a; font: 16px Microsoft Yahei; margin: 0; padding: 0;  }
.content-fine-list .list-item .content-item-list { margin: 0; padding: 0; }
.content-fine-list .list-item li { width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.content-item-list { width: 100%; }
.content-item-list li { padding-left: 10px; line-height: 20px; }
.content-item-list li a { color: #77654f; text-decoration: none; }

</style>
</head>
<body>
   
    
      <div class="content-sider"><!– content-paper end –><!– content-video end–><!– content-lecture end –>
       <div class="content-fine-list clearfix">
            <div class="list-item">
              <h5>近距离</h5>
              <ul class="content-item-list">
                <li><a href="#">广东阳江 县委书记“竞选上岗”</a></li>
                <li><a href="#">改革值得肯定 推广还需时日</a></li>
                <li><a href="#"> 走近京沪高铁“大小脑”</a></li>
              </ul>
            </div>
            <!– list-item end –>
            <div class="list-item">
              <h5>天下</h5>
              <ul class="content-item-list">
                <li><a href="#">广东阳江 县委书记“竞选上岗”</a></li>
                <li><a href="#">改革值得肯定 推广还需时日</a></li>
                <li><a href="#"> 走近京沪高铁“大小脑”</a></li>
              </ul>
            </div>
            <!– list-item end –>
            
            <div class="list-item">
              <h5>文汇学人</h5>
              <ul class="content-item-list">
                <li><a href="#">广东阳江 县委书记“竞选上岗”</a></li>
                <li><a href="#">改革值得肯定 推广还需时日</a></li>
                <li><a href="#"> 走近京沪高铁“大小脑”</a></li>
              </ul>
            </div>
            <!– list-item end –>
            
            <div class="list-item">
              <h5>360观察</h5>
              <ul class="content-item-list">
                <li><a href="#">广东阳江 县委书记“竞选上岗”</a></li>
                <li><a href="#">改革值得肯定 推广还需时日</a></li>
                <li><a href="#"> 走近京沪高铁“大小脑” </a> </li>
              </ul>
            </div>
             <!– list-item end –>
          </div>
          <!– content-fine-list end –>
        
      </div>
    
 
</body>
</html>

<!– code end –>

 解决方案:最简单的则是直接去掉 "content-fine-list"里面的子元素的所有"<!– list-item end –>"注释。即去掉浮动元素之间的所有注释。这样这个多出来的字就会自动消失了。。ie6bug 真是多啊。。。

在g里面搜索出来的【IE6的疯狂之四】IE6文字溢出BUG  这篇文章里面有更多的解决方法。不过该lz说得“由注释造成文字溢出,属于IE6的BUG,溢出文字的字数=注释的条数*2-1” 这个我这里测试的不是这个结果,且如果我删除第一个"<!– list-item end –>"后bug就消失了。如同该lz所说的“注释所在位置与溢出位置、区块的浮动以及文字区块的固定宽度有必然联系”。所以什么都不是绝对的具体情况还需要看你的代码结构、样式等。这些内容仅供参考。

ps:该lz的IE6的疯狂系列还是很不错的,需要兼容解决方案的可以去好好看下。

 还有这里:ie6/7下的一些常见兼容问题解决

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*