css文字重复ie bug导致文字的奇怪复制

王朝html/css/js·作者佚名  2008-09-24
窄屏简体版  字體: |||超大  

当多个浮动的元素彼此跟随,中间加注释的时候,最后一个浮动元素内的文本偶尔会复制到最下面去。学名Duplicate Characters Bug

程序代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="//www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>多了一只猪</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个浮动的区块之间。

3、将文字区块包含在新的<div></div>之间,如:<div style="float:right;width:400px"><div>↓这就是多出来的那只猪</div></div>。

4、去除文字区块的固定宽度,与3有相似之处。

5、有的人在猪后加一个<br />或者空格,但只是消除现象。

6、不要给浮动元素设置多宽度,使其不会到达包含元素的底部,或者对最后一个元素设置margin-right: -3px;或者更小。

7、注释可以这样写:<!--[if !IE]>Put your commentary in here...<![endif]-->

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航