现在的位置: 首页 > 综合 > 正文

bug和bug修复

2019年07月26日 ⁄ 综合 ⁄ 共 1004字 ⁄ 字号 评论关闭

1. 常见bug及其修复方法

1.1 双空白边浮动bug

最常见且最容易发现的bug之一是IE6和更低版本中的双空白边浮动bug。这个windows bug使任何浮动元素上的空白边加倍。
如图:
这个bug很容易修复,将元素的display属性设置为inline就行了。因为元素是浮动的,将display属性设置为inline实际上
不会影响显示方式。每当对具有水平空白边的元素进行浮动时,都应该很自然地将display属性设置为inline。

1.2  3像素文本偏移bug

在IE6/Win中,当文本跟在一个浮动的元素之后,文本和这个浮动元素之间会多出3px的间隙。
在一个典型的浮动中,如下面的图片所示:灰色矩形是外部容器,绿色容器在外部容器内向左浮动,未浮动的部分包围着浮动部分。但是IE6在解析这样的浮动时,会莫名的给靠紧浮动部分的未浮动部分添加3个像素的边距。为了更加直观,让我们将Firefox和IE6中的效果做一对比(图是Firefox中的效果,图是IE6中的效果):
清晰的观察到IE6中的3像素边界bug,解决这个bug只需要将浮动部分的右边距左缩进3个像素,使用只针对IE的hack。但是一用到margin,又会出现双倍浮动边界的bug,所以在解决3px的bug时,使用display:
inline。

1.3 IE6重复字符bug

另一个涉及浮动元素的奇怪bug是IE6的重复字符bug。在某些条件下,一系列浮动元素的最后一个元素中的最后几个字符会在浮动元素下面重复出现。
当在一系列浮动元素的第一个和最后一个元素之间有多个注释时,就会出现这个bug。前两个注释没有影响,但是后续的每个注释就会导致两个字符重复出现。所以,三个注释导致2个重复字符,五个注释会导致6个重复字符。
避免这个bug最容易、最安全的方法是从HTML代码中删除注释。
1.4 IE6躲躲猫bug
这个bug之所以叫这个名字是因为在某些条件下文本看起来消失了,只有在重新装载页面时才再度出现。出现这个bug的条件是:一个浮动元素后面跟着一些非浮动元素,然后是一个清理元素,所有这些元素都包含在一个设置了背景颜色或图像的父元素中。如果清理元素碰到了浮动元素,那么中间的非浮动元素看起来消失了,隐藏在父元素的背景颜色或图像之后,只有在刷新页面时才重新出现。

有很多的方法解决这个bug。可以去掉父元素上的背景颜色或图像。给容器指定行高也不会出现这个bug。

抱歉!评论已关闭.