注释在IE下造成文字溢出

[ 来源:近水社区 | 作者: | 时间:2008-01-07 | 收藏 | 推荐 ] 【大中小】

很多人都会有在制作网页的时候写注释的习惯。应该说是个好习惯，不仅使自己的思路清晰，极大地减轻了维护的难度，也为其他人的阅读提供了方便。但就是这样的好习惯，有时也会为我们带来一想不到的麻烦，如典型的3px问题。

各浏览器都无一例外的在遇到注释文字时都会忽略，但在IE下还是给我们增添了不小的麻烦。当子对象设置了浮动属性，且宽度等于父对象的宽度，此时在IE下就会出现问题。

请看下面的代码：

<!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=gb2312" />
<title>垂直居中</title>
<script type="text/javascript" language="javascript">
function sel(id) {switch(id) {case "1":for (i=1;i<3;i++) {document.getElementById("sub" + i).style.display = "none";}break;case "2":document.getElementById("sub2").style.display = "none";document.getElementById("sub1").style.display = "block";break;case "3":for (i=1;i<3;i++) {document.getElementById("sub" + i).style.display = "block";}break;}}
</script>
<style type="text/css">
#all {
float:left;
width:240px;
padding:10px;
font-size:12px;
color:#FFF;
background-color:#CCC;
}
#sub {
float:left;
width:240px;
padding-bottom:5px;
background-color:#09C;
}
.sub {
float:left;
margin-top:5px;
width:240px;
line-height:20px;
background-color:#F90;
}
#sel {
clear:both;
padding-top:5px;
}
select {
width:260px;
}
</style>
</head>

<body>
<div id="all">
<div id="sub">
<div class="sub">把每行后面都加注释，加注释后，最后一行文字有溢出，溢出字数 = 注释数 * 2 - 1</div> 
<div class="sub" id="sub1">这里是第二行的内容</div> 
<div class="sub" id="sub2">这里是第三行的内容</div> 
</div>
</div>
<div id="sel"><select onchange="sel(this.value)"><option value="1">一行：因为注释在后面，所以不受影响</option><option value="2">两行：上面有一个注释，末行溢出一个字</option><option value="3">三行：上面有两个注释，末行溢出三个字</option></select></div>
</body>
</html>

1、问题：以#Sub为父对象来说，其下有宽度和它相同的N个子对象，并且都设置了浮动属性。为了区别各子对象，为每个子对象后面都加了注释。这时候我们看到最后一行的文字有溢出的现象。

2、解决方法：

（1）把注释去掉。即把XHTML中的“”全部删除。这也是最直接最有效的方法。但需要设计师在页面和程序结合时逻辑必须清楚，否则会非常麻烦。

<body>
<div id="all">
<div id="sub">
  <div class="sub">把每行后面都加注释，加注释后，最后一行文字有溢出，溢出字数 = 注释数 * 2 - 1</div>
  <div class="sub" id="sub1">这里是第二行的内容</div>
  <div class="sub" id="sub2">这里是第三行的内容</div>
</div>
</div>
</body>
</html>

（2）取消子对象的浮动属性。即把CSS中“.sub”中的“float:left;”去掉。

<!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">

（编辑：IT资讯之家 www.it55.com）