随着IE8的问世,微软终于开始将其浏览器向标准化靠拢,而且其市场占有率已经接近于Chrome了,但由于IE6及IE7仍然占有巨大的市场份额,在此我总结一下主要关于IE6/7的bug。

1. 双倍浮向Bug
这 个bug在IE6及更低版本的浏览器中存在。当IE6及更低版本的浏览器在解析浮动元素时,会错误地把浮向边边界(margin)加倍显示。修复这个 bug的方法很简单,只需要将元素的display属性设置为inline就行了。因为浮动元素自动以块状显示,而设置display:inline在这 里似乎没有作用,但却可以修正这个bug。

这里值得注意的是这里被加倍的margin是指浮向边的margin,例如设置元素float:left,则margin-right不会被加倍,只有margin-left会被加倍显示,我们也可以利用这一点来避免此bug。

2. 多出3像素bug
这个bug在IE6及更低版本的浏览器中存在。当IE6及更低版本的浏览器在解析浮动元素与流动文本环绕时,流动元素会莫名其妙的多生出3像素宽的补白(padding)。
解决方法一:
对浮动元素设置display:inline-block;
此方法缺点:如果在浮动元素上/下方同时存在另一个非浮动元素,会造成两元素边框无法对齐。
解决方法二:
使用过滤器*html #float{height:1%;}(IE6或更低)
为流动元素定义任意高度,迫使其拥有布局,IE具有自适应高度特性。
解决方法三:
如果浮动元素是图像:
*html #float{
****margin:0 -3px; /*IE 5.X*/
****ma\rgin:0; /*IE6*/
}

3. 多余字符bug
这 个bug在IE6中存在。有些人说解决此类问题的方法是不要在浮动元素中添加注释,但注释在代码过程中不可避免,我们无法控制何时会出现注释。我研究了一 下,其实有一个方法可以解决这个问题,那就是利用margin负值,我还不确定这个bug与上面提到的多出3像素bug是否有关联,但如果对 float:left的元素,设置margin-right:-3px却是可以解决这个bug的。

4. 定位bug
这个bug在IE6及更低版本的浏览器中存在。IE6及更低版本浏览器对于没有指定高度的相对元素,不能正确解析它内部元素的决定定位。解决的方法是利用过滤器技巧为IE6及更低版本浏览器定义一个高度强迫相对元素拥有布局属性。
*html #box{height:1%;}

5. 捉迷藏bug
这 个bug在IE6中存在。在特定条件下,标准布局页面被刷新或重新下载时,会发现某些内容消失了,当再次刷新或选中时才会显示出来,原来它们都隐藏在父元 素背景之后。出现这种bug多因为浮动元素与流动元素混合布局,后面元素又被设置了clear属性。如果设置了父元素背景色,当加载页面时,流动元素内的 内容可能会隐藏在父元素下面而看不见。解决该bug的方法是,可以去除父元素的背景色,或为父元素制定固定高度和宽度,也可以为浮动元素和父元素定义 position:relative来避免此类问题发生。

6. 百分比bug
这个bug产生的原因是IE对百分比取值方式造成的。IE对百分比的计算式四舍五入方法,这种方法有时会造成100%大于100%的情况。