可恶到的IE6因浮动引起的字符自动复制BUG

最新推荐文章于 2015-08-19 22:31:00 发布

celestial1985

最新推荐文章于 2015-08-19 22:31:00 发布

阅读量405

点赞数

文章标签： ie float duplicates border scroll triggers

可恶的IE6，真的让人蛋疼……
这个BUG的原因真的让人很费解,让我郁闷很久！
首先来看下BUG演示（请用IE6测试）

<html>
<head>
<style>
.outerfloatwrapper {
float: left;  
display: inline;  /*** Prevents the IE Doubled Margin Bug ***/
width: 256px;  
margin: 0 15px 20px 15%;
}
 
.demobox {
width: 250px;  
border: 3px solid #4c6f42;
}
 
.demobox a:hover {
background: #dfd;  /*** This hover change triggers buggyness in the links ***/
}
 
.firstfloat {
float: left;  
width: 200px;  
background: #939a90;  
text-align: center;  
color: #fff;
}
 
.secondfloat {
float: left;  
width: 250px;  
margin-bottom: 2px;  
background: #fbdabb;
}
</style>
</head>
<div class="outerfloatwrapper">
<div class="demobox">
<div class="firstfloat">First float</div>
<!-- comment --> <!-- comment --> <!-- comment --> <!-- comment --> <!-- comment -->  
<!-- comment --> <!-- comment --> <!-- comment --> <!-- comment --> <!-- comment -->  
<!-- comment --> <!-- comment --> <!-- comment --> <!-- comment --> <!-- comment -->  
<!-- comment --> <!-- comment --> <!-- comment --> <!-- comment --> <!-- comment -->  
<!-- comment --> <!-- comment --> <!-- comment --> <!-- comment --> <!-- comment -->  
<!-- comment --> <!-- comment --> <!-- comment --> <!-- comment --> <!-- comment -->  
<!-- comment --> <!-- comment --> <!-- comment --> <!-- comment --> <!-- comment -->  
<!-- comment --> <!-- comment --> <!-- comment --> <!-- comment --> <!-- comment -->  
<!-- comment --> <!-- comment --> <!-- comment --> <!-- comment --> <!-- comment -->  
<!-- comment --> <!-- comment --> <!-- comment --> <!-- comment --> <!-- comment -->
<div class="secondfloat">
<p style="border: 1px solid rgb(255, 0, 0); padding: 0pt 0pt 0pt 20px; margin-bottom: 2px; margin-top: 0pt;">
Second float<br><br>
<span style="background: rgb(242, 171, 130) none repeat scroll 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
In IE6 some of this text is replicated in a "mystery block element" that starts directly below  
the float. This light brown float has a 2px bottom margin which also duplicates into the mystery  
element, getting added to the bottom of the text if it is wrapped in a span as it has been  
here.
<br>
<a href="#">Test link</a>
<img src="http://www.silentash.com/upload/200811131441366325.jpg" alt="" style="border: 1px solid rgb(60, 69, 36);">
</span>
</p>
</div>
<div style="background: rgb(178, 212, 175) none repeat scroll 0%; clear: both; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">Cleared element</div>
</div>
</div><!-- End of .demobox -->
</body>
</html>

在IE6下，float2中的文字被复制了一段，且P元素也被复制，这个例子真的是很好，很明白，现在我们来说明一下：
这个演示是用一个宽250px的容器（绿色的框）包含了一个宽200PX的浮动元素（灰色），还有第二个浮动容器（淡棕色），并且给予第二个容器 250PX的宽度，和最外面的绿框容器一样。在第二个容器里面，我们放置了一个红色边框的段落元素P，包含一些SPAN文字和一张图，这些文字和图作用不大，只是为了让BUG显示的更明显。最后在后面跟上一个清除浮动用的DIV（绿色）。还有，为了更好的区分开复制的元素，我们给予第二个浮动容器一个 2PX的底部MARGIN。
如果你查看这个演示的源代码，会发现我加入了50个注释，第一个注释关系并不大，而重点在后面的注释，和复制出来的文字有直接联系。大家可以删除试试。

分析原因

首先可以肯定的是，这个BUG是由多个注释引起的。我在这里放了50个相同的注释，问题就相当的严重=.=!
不过附加的注释只有在第二个浮动元素右边触碰到外围边框或者距外围边框小于3PX的时候才会触发这个BUG，貌似是因为IE6默认的给予了第二个浮动容器 3个象素的右边Margin一样，因此，当这个容器和外面的容器同样宽度时，没有足够的空间去释放这3个象素的右边距，产生了这个让人郁闷的BUG。

解决方法
现在可行的解决方法，比较好的解决方法是给出现问题的第二个浮动容器加上3PX的负值MARGIN，即margin-right:-3px;还有一个方法是去掉引起BUG的注释=.=!我记得当初意识到是注释引起的时候，我只是去掉了注释，但有些时候注释是必要的，所以我们还是用第一种方法吧。
还有一个变通的方法是用条件注释，即，也可以解决这个BUG。

结论
IE6浏览器中，注释要谨慎啊！！