DIV+CSS布局 浏览器中多了几个字的原因和解决方法
支付宝内搜索 9155838 即可领现金红包 每天都能领哦
我用DIV+CSS代码写的网页布局碰到个问题，就是在IE下平白无故会多出几个字来，就是重复某个div内的最后几个字符，并且是换行多出来的，这种现象只是在IE里面才有，在firefox却没一点问题，十分正常。在IE里面看代码里面也并没有重复的字，这个问题困扰了我好久，一直在调试，看十分代码有重复的地方，或者网站的支持程序本身有问题才导致这样的？乱费了很多的时间都找不到原因，经过一番的努力最终才知道，原来是因为我的注释引起的问题，因为我写代码的时候都会做些注释，没想到这样良好的习惯反而成了罪魁祸首了。5555555
其实早也有人遇到过我这个问题，叫《IE中发现新BUG "重影"》只是我没找到而已，后来才知道，所以搜索很久都没找到相应的办法，下面我分析一下这个问题，也可能我分析得有问题甚至是错误的，但是至少我的问题还是解决了，希望给其他的人一些参考：
实验代码如下:
<!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浏览器中总是多了几个字</title>
</head>
<body>
<div style="width:400px">
<div style="float:left"></div>
<!-- -->
<div style="float:right;width:400px">↓这就是多出来的字</div>
</div>
</body>
</html>
1、在IE、FF中测试，只在IE出现文字溢出现象。
说明：注释造成文字溢出是IE的BUG。
2、去除<div style="float:left"></div> 中的“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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>在IE浏览器中总是多了几个字</title>
</head>
<body>
<div style="width:400px">
<div></div>
<!-- -->
<div style="float:right;width:400px">↓这就是多出来的字</div>
</div>
</body>
</html>
同样去除 <div style="float:right;width:400px">中的“float:right;”，多余的字也同样消失，页面正常显示。
<!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浏览器中总是多了几个字</title>
</head>
<body>
<div style="width:400px">
<div style="float:left"></div>
<!-- -->
<div style="width:400px">↓这就是多出来的字</div>
</div>
</body>
</html>
说明：注释造成文字溢出与区块的浮动有关。
3、将注释转移到<div style="float:left"></div>前面，多余的字消失，页面正常显示。
<!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浏览器中总是多了几个字</title>
</head>
<body>
<div style="width:400px">
<!-- -->
<div style="float:left"></div>
<div style="float:right;width:400px">↓这就是多出来的字</div>
</div>
</body>
</html>
将注释转移到<div style="float:right;width:400px">↓这就是多出来的字</div>下面，多余的字也同样消失，页面正常显示。
<!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浏览器中总是多了几个字</title>
</head>
<body>
<div style="width:400px">
<div style="float:left"></div>
<div style="float:right;width:400px">↓这就是多出来的字</div>
<!-- -->
</div>
</body>
</html>
说明：注释造成文字溢出与其位置有关。（可与第2点结合理解）
4、去除<div style="float:right;width:400px">中的“width:400px”，多余的字消失，页面正常显示。
<!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浏览器中总是多了几个字</title>
</head>
<body>
<div style="width:400px">
<div style="float:left"></div>
<!-- -->
<div style="float:right;">↓这就是多出来的字</div>
</div>
</body>
</html>
说明：注释造成文字溢出与文字区块的固定宽度有关（无论是绝对值还是相对值）。
5、增加注释的条数：当1条注释时，则多出来1个字；2条注释时，则多出来3个字；3条注释时，则多出来5个字……
<!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浏览器中总是多了几个字</title>
</head>
<body>
<div style="width:400px">
<div style="float:left"></div>
<!-- -->
<div style="float:right;width:400px">↓这就是多出来的字</div>
</div>
</body>
</html>
<!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浏览器中总是多了几个字</title>
</head>
<body>
<div style="width:400px">
<div style="float:left"></div>
<!-- -->
<!-- -->
<div style="float:right;width:400px">↓这就是多出来的字</div>
</div>
</body>
</html>
<!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浏览器中总是多了几个字</title>
</head>
<body>
<div style="width:400px">
<div style="float:left"></div>
<!-- -->
<!-- -->
<!-- -->
<div style="float:right;width:400px">↓这就是多出来的字</div>
</div>
</body>
</html>
<!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浏览器中总是多了几个字</title>
</head>
<body>
<div style="width:400px">
<div style="float:left"></div>
<!-- -->
<!-- -->
<!-- -->
<!-- -->
<div style="float:right;width:400px">↓这就是多出来的字</div>
</div>
</body>
</html>
我们会从上面的规律中得到这样一个公式：溢出文字的字数=注释的条数*2-1，这里的字数在中文或英文数字时都成立。
当溢出的文字字数大于文本的字数时，文字区块将会消失。
<!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浏览器中总是多了几个字</title>
</head>
<body>
<div style="width:400px">
<div style="float:left"></div>
<!-- -->
<!-- -->
<!-- -->
<!-- -->
<!-- -->
<!-- -->
<!-- -->
<!-- -->
<div style="float:right;width:400px">↓这就是多出来的字</div>
</div>
</body>
</html>
说明：溢出的字数与注释的条数有关。
由1和2的测试得知：注释不要放置于2个浮动的区块之间。
解决方法：
1、不放置注释。最简单、最快捷的解决方法，嘿嘿……
<!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浏览器中总是多了几个字</title>
</head>
<body>
<div style="width:400px">
<div style="float:left"></div>
<div style="float:right;width:400px">↓这就是多出来的字</div>
</div>
</body>
</html>
2、注释不要放置于2个浮动的区块之间。
<!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浏览器中总是多了几个字</title>
</head>
<body>
<div style="width:400px">
<!-- -->
<div style="float:left"></div>
<div style="float:right;width:400px">↓这就是多出来的字</div>
</div>
</body>
</html>
3、将文字区块包含在新的<div></div>之间，如：<div style="float:right;width:400px"><div>↓这就是多出来的字</div> </div>。
<!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浏览器中总是多了几个字</title>
</head>
<body>
<div style="width:400px">
<div style="float:left"></div>
<!-- -->
<div style="float:right;width:400px"><div>↓这就是多出来的字</div></div>
</div>
</body>
</html>
4、去除文字区块的固定宽度，与3有相似之处。
<!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浏览器中总是多了几个字</title>
</head>
<body>
<div style="width:400px">
<div style="float:left"></div>
<!-- -->
<div style="float:right;">↓这就是多出来的字</div>
</div>
</body>
</html>
总体的解决方法就是不做任何注释，注释不要放置于2个浮动的区块之间，还有就是如果做注释的话，注释的格式如果是这样（<!--[if !IE]>这里是注释的文字<![endif]-->）就没有问题了。
另外在后面个DIV里面加注释会抵消前面的注释，例如：
<html>
<head>
<title>123</title>
</head>
<body>
<div style="background-color:red; width:100px; " ><!-- -->
<div style="float:left;"><!-- --></div>
<!-- -->
<!-- -->
<div style="float:right; width:100px;">心灵博客，注释<!-- --><!-- --></div><!-- -->
</div>
</body>
</html>
问题解决了，方法也很多，我是肯定要用注释的。所以我用的是这种方式：<!--[if !IE]>这里是注释的文字<![endif]-->
大家都可以直接复制代码测试一下。
更新于:2007-12-09 12:21:58 栏目:技术技巧 关键词:浏览器,css,html,div,bug,错误
本站使用「署名 4.0 国际」创作共享协议，可转载、引用，但需署名作者且注明文章出处
这个问题我也遇到过, 后来是这么解决的:
在第一个示例中, 在这行下面
↓这就是多出来的字
加上
那个多的字就不见了.
这个问题我也遇到过, 后来是这么解决的:
在第一个示例中, 在这行下面
《div style=“float:right;width:400px”》↓这就是多出来的字《／div》
加上
《div style=“clear:both;width:100%;”》《／div》
那个多的字就不见了。
html代码用全角标点应该能显示了吧，呵呵。
加个清除应该也是一种解决的方法。
当初我不知道是怎么回事，总以为浏览器出问题了，或者是用的那个网站程序出了什么问题。搞了很久才去搜索，原来竟然是ie的问题。有点郁闷，呵呵。