ie6重复文字bug解决方法总结-百分百源码网

ie6重复文字bug解决方法总结

发布时间：01/15 来源：浏览：关键词：

我想做前台的朋友有时会发现自己写的css会多出一行重复的字或一行字出来，但是在html页面中就只有一行，这种问题并且只会出现在ie6浏览器下，下面我就来给大家介绍ie6重复文字bug的解决方法。

在网上首先找到了好几篇相同的文章，解释的原因是注释引起的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的关键，至于为什么浮动会引起这个现象

打赏