注释在IE下造成文字溢出

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

<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 {
margin-top:5px;
width:240px;
line-height:20px;
background-color:#F90;
}
</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>

但这样有时会在FireFox下引发新的问题。比如当子对象下面又包含了浮动对象时，在FireFox中就会出现子对象无法自适应高度的问题。请参阅无浮动的对象在FireFox无法自适应高度

（3）设置子对象的宽小于父对象宽至少5px。即父对象的宽是240px，设置“.sub”的“width:235px”。

<!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:235px;
line-height:20px;
background-color:#F90;
}
</style>
</head>

其实，就本例而言，子对象小于父对象3px就可以，但当子对象的数量增多时同样会出现溢出的问题。如果用这种方法，本人推荐最小要小于5px，这样就不会出现溢出的问题了。

（4）IE Hack。利用这样的注释也可以避免：“”。

<!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;
}
</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>

同理，运用CSS Hack也可以即避免bug，又兼容各种浏览器，但比较复杂，为什么有简单的不用呢？

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