在网上首先找到了好几篇相同的文章，解释的原因是注释引起的bug，但我的代码中并没有注释啊，总结了一下有一下解决方案
1、不放置注释。这是最简单、最快捷的解决方法，但不方便，有时是需要注释的；
2、注释不要放置于2个浮动的区块之间；
3、将文字区块包含在新的元素之间（这个增加了多余的元素），如在外面再加一层div；
4、去除文字区块的固定宽度，与3有相似之处；
5、在后面加一个
或者空格（这个增加了多余的元素）；
6、使用IE注释格式（这个是可以使用的，不论在IE还是火狐都正常显示，而且也符合标准，但和常规的注释不一样）
7、给盒子加;属性（个人觉得这个应该是最好的解决方法，应该只有IE6有这个BUG，可以只针对IE6加这个属性）。
例
| 代码如下 | 复制代码 |
|
<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css"> #test { border: 1px solid #ddd; width:300px; } #test a { float:left; width:50%; } #test a:hover { background-color:#ddd; } </style> </head> <body> <div id="test"> <a href="#">一二三四五</a> <a href="#">上山打老虎</a> <a href="#">老虎不在家</a> <a href="#">看见小松鼠</a> <a href="#">数来又数去</a> <a href="#">怎么多了一只松鼠</a> </div> </body> |
|
bug的解决，首先想到著名的ie6浮动动元素多出3pxbug
所以沿用消除3px bug的方法，给浮动元素margin-right:-3px;
结果bug消失，代码如下
| 代码如下 | 复制代码 |
|
<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css"> #test { border: 1px solid #ddd; width:300px; } #test a { float:left; width:50%; margin-right:-3px; } #test a:hover { background-color:#ddd; } </style> </head> <body> <div id="test"> <a href="#">一二三四五</a> <a href="#">上山打老虎</a> <a href="#">老虎不在家</a> <a href="#">看见小松鼠</a> <a href="#">数来又数去</a> <a href="#">怎么多了一只松鼠</a> </div> </body> |
|
解决方法二
第二个清除bug的方法，浮动元素加背景色background-color: #eee;，bug消失
| 代码如下 | 复制代码 |
| <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css"> #test { border: 1px solid #ddd; width:300px; } #test a { float:left; width:50%; background-color: #eee; } #test a:hover { background-color:#ddd; } </style> </head> <body> <div id="test"> <a href="#">一二三四五</a> <a href="#">上山打老虎</a> <a href="#">老虎不在家</a> <a href="#">看见小松鼠</a> <a href="#">数来又数去</a> <a href="#">怎么多了一只松鼠</a> </div> </body> |
|
三个方法在测试demo中是可以解决问题的，在我遇到的个案中仅方法一可行，所以我对ie6重复文字bug的结论是浮动，浮动是引起这个bug的关键，至于为什么浮动会引起这个现象
时间： 2024-10-23 18:51:33