IE6 bug总结

随着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%的情况。