注释在IE下造成文字溢出

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

（5）我在网上还看到了有人用“position:relative”或“position:absolute”来解决问题，本人“不推荐”用这种方法，因为它会产生一想不到的后果。假如浮动对象都有一个共同的父对象时，虽然溢出的文字不见了，但是它还会占位。

<!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>IE注释bug</title>
<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;
position:relative;
}
</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>
</body>
</html>

把“position:relative;”替换成“position:absolute;”，会造成相互覆盖。

3、总结：

（1）由第一个例子可以看出，在IE下，当注释在两个或两个以上同级浮动对象之间时才会出现溢出的bug。注释在两个或两个以上浮动对象之前或之后都不会出现溢出的bug。如：

<div id="sub">

 <div class="sub">把每行后面都加注释，加注释后，最后一行文字有溢出，溢出字数 = 注释数 * 2 - 1</div>

<div class="sub" id="sub1">这里是第二行的内容</div>

<div class="sub" id="sub2">这里是第三行的内容</div> 

</div>

这样是不会出现溢出错误的，因为三个子对象之间没有注释。虽然父对象有浮动，但因为不是同级对象，所以不会出错。

（2）如果相邻的多个同级浮动对象之间都有注释，则错误作用在最后一个浮动对象上，溢出文字数 = 浮动对象之间的注释数 * 2 - 1。

（3）建议大家在同级的相邻浮动对象之间尽量不要加注释。

其实，选择什么样的方法在于个人，但我的一贯原则就是“用最简单的办法解决最复杂的问题”。我们没有必要把复杂的问题搞的更复杂，简单有效才是最好的，即减轻了浏览器的压力，也方便了别人，方便了自己。如果您有什么更好的方法，或有什么不同的看法，欢迎与我交流。