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]-->
大家都可以直接复制代码测试一下。

推荐文章

已有 4 条评论
  1. Peter

    这个问题我也遇到过, 后来是这么解决的:
    在第一个示例中, 在这行下面
    ↓这就是多出来的字
    加上

    那个多的字就不见了.

    Peter 回复
  2. Peter

    这个问题我也遇到过, 后来是这么解决的:
    在第一个示例中, 在这行下面
    《div style=“float:right;width:400px”》↓这就是多出来的字《/div》
    加上
    《div style=“clear:both;width:100%;”》《/div》
    那个多的字就不见了。

    html代码用全角标点应该能显示了吧,呵呵。

    Peter 回复
  3. xylx

    加个清除应该也是一种解决的方法。

    当初我不知道是怎么回事,总以为浏览器出问题了,或者是用的那个网站程序出了什么问题。搞了很久才去搜索,原来竟然是ie的问题。有点郁闷,呵呵。

    xylx 回复
发表新评论取消回复