找回密码
 注册
首页 ≡≡网络技术≡≡ WEB前端 初学CSS要注意IE6注释bug

初学CSS要注意IE6注释bug

灰儿 2012-2-16 16:21:15
初学CSS的朋友可能会碰到这样的问题,用IE6预览页面时经常在div区域外看到div区域内的文本内容,好像文本又被复制了一遍一样。这个其实是IE6的一个bug,本文就是要解决这个问题。如下图:
110913172057020.jpg
bug名称:
这个问题是IE6的bug,俗称IE6注释bug,也叫做浮动容器的字符复制bug。
形成原因:
它的形成原因是几个相连的浮动容器中间插入一段html注释代码,就会将最后一个容器中的最后几个字符复制到容器之外显示出来,不过这个bug只存在于IE6中,IE7及以上版本和Firefox等浏览器不存在此bug。
下面以一段代码举例:
以下是代码片段:

<style type="text/css">  
div {
width:100%;  float:left;  
}  
</style>  
<div>段落文字</div>  
<div>段落文字</div>  
<div>段落文字</div>
<!--引出bug的黑手-->  
<div>段落文字</div>  
<div>段落文字</div>     

将这段代码复制到网页中,然后用IE6预览,在第五行文字的下边就会多出来一个文字,如图一中所示,而用其它浏览器的预览效果则如图二所示。
解决方法:
其实这个bug的解决方法十分简单,那就是&mdash;—去掉注释,或者将注释添加到最后一个元素
您需要登录后才可以回帖 登录 | 注册
学习中心
站长自定义文字内容,利用碎片时间,随时随地获取优质内容。
Q设计语言 了解更多
Q Design 提供商家设计所需的指导与资源,帮商家快速完成产品设计、降低生产成本。
学习中心
站长自定义文字内容,利用碎片时间,随时随地获取优质内容。
Q设计语言 了解更多
Q Design 提供商家设计所需的指导与资源,帮商家快速完成产品设计、降低生产成本。