IE 常见bug

1. 双空白边浮动bug

最常见且最容易发现的bug 之一是IE6和更低版本中的双空白边浮动bug。顾名思义，这个Windows bug使任何浮动元素上的空白边加倍

这个bug 很容易修复，将元素的display 属性设置为inline 就行了.因为元素是浮动的，将display 属性设置为inline 实际上不会影响显示方式。但是，这似乎会阻止Windows 上的IE6和更低版本将所有空白地加倍。这是一个非常容易发现和修复的bug : 每当对具有水平空白边的元素进行浮动时，都应该很自然地将display 属性设置为inline。

2. 像素文本偏移bug(3像素)

另一个非常常见的I E 5-61Win bug 是3像素文本偏移bug。当文本与二个浮动元示相邻时，这个bug 就会表现出来。例如，假设将-个元素向左浮动，并且不希望相邻段落中的文本围绕浮动元素。你可能会在段落上应用一个左空白边，其宽度等于浮动元素的宽度:
.myFloat { float: left; width: 200px; }
p { margin-left: 200px; }
如果这么做，在文本和浮动元素之间就会出现一个莫名其妙的3像素间隙。

修复这个bug 需要双管齐下。首先，给包含文本的元素设置任意的高度。这会迫使元素拥有布局，这在表面上会消除文本偏移。因为Windows 上的IE6和更低版本将height作为min-height那样对待，所以设置一个小的高度并不会影响元素在这些浏览器巾的实际尺寸。但是，这会影响其 他浏览器，所以要使用Holly招数对除了Windows 上的IE6 和更低版本之外的所有其他浏览器隐藏这个规则，

/* Hide from IE5-Mac. Only IE-Win sees this. \*/
* html p { height: 1%; }
/* End hide from IE5/Mac */

不幸的是，这么做会导致另一个问题。正如在前面学到的，拥有布局的元素被限制为矩形的，并且出现在浮动元索的旁边而不是它们的下面。添加200像素 的空白边实际上会在IE 5-6/Win 中在浮动元素和段落之间产生200像素的间隙。为了边免这个问隙，需要将IE 5-6/Win 上的空白边重新设置为零:

/* Hide from IE5-Mac. Only IE-Win sees this. \*/
* html p { height: 1%; margin-left: 0; }
/* End hide from IE5/Mac */

文本偏移被修复了，但是现在另一个3像亲间隙出现了，这一次是在浮动元素上。为了去掉这个问隙，需要在浮动元素上设置一个负值的3像素右空白边：

/* Hide from IE5-Mac. Only IE-Win sees this. \*/
* html p { height: 1%; margin-left: 0; }
* html .myFloat { margin-right: -3px; }
/* End hide from IE5/Mac */

如果浮动元素是除了图像之外的任何其他东西，那么这个问题己经修复了。但是，如果浮动元旦在是图像，那么还有放后一个问题需要解决。 IE 5.x/Win在图像的左右都添加3像亲的间隙。而IE6不改变图像的空白边。因此，需要用另一个招术在IE 5.x/Win 上去掉3 像素的问隙:

/* Hide from IE5-Mac. Only IE-Win sees this. \*/
* html p { height: 1%; margin-left: 0; }
* html img.myFloat { margin: 0 -3px; ma\rgin: 0; }
/* End hide from IE5/Mac */

这会解决问题，但是采用的方式很难看而且太复杂。因此，如果可能的话，最好将这些规则分别放进单独的浏览器特定的样式表中。如果这样做，用于Windows 上的lE 5.x的样式表如下：

p { height: 1%; margin-left: 0; }
img.myFloat { margin: 0 -3px; }

用于IE 6的样式表如下:

p { height: 1%; margin-left: 0; }
img.myFloat { margin: 0; }

3. IE 6躲躲猫bug

另一个奇怪而且很烦人的 bug 是IE6 的躲躲猫(peek-a-boo) bug，之所以起这个名称是因为在某些条件下文本看起来消失了，只有在前新装载页面时才再度出现。出现这个bug 的条件是:一个浮动元素后面跟着一些非浮动元素，然后是一个清理元素，所有这些元素都包含在一个设置了背景颜色或阅像的父元束中。如果清理元素碰到了浮动 元素，那么中间的作浮动元素看起来消失了，隐藏到了父元素的背景颜色或图像后面，只有在刷新页面时才重新出现

解决方法：

1.明确的指定最外面div容器的宽度（相对宽度和绝对宽带都可以）。
2.去掉最外面div容器的背景颜色（或者背景图片）
3.缩小浮动div容器的高度到一定程度
4.不浮动div容器
5.不使用<div class=”clear”><div>技术

4. 相对容器中的绝对定位

将绝对定位的元素嵌套在相对容器中是多么有用。但是，IE 6和更低版本在使用这种技术时有许多bug。

这些bug 的原因在于相对定位的元素没有获得IE/Win 的内部hasLayout 属性。因此，它们不创建新的定位上下文，所有绝对定位元素相对于窗口进行定位

为了使Windows 上的IE 6和更低版本的表现正确。需要迫使相对应位的容器拥有布局。一种方法是在容器上显式地设置width 和height。但是，常常希望在不知道容器的width 和height的况下，或者在需要这些属性保持灵活的情况下使用这种技术。

可以使用Holly 招数为容器提供一个的高度。这会让容器拥有布局。但是因为IE 6和更低版本中的元素会不正确地扩展以适应它们的内容，所以设置小的高度不会影响实际高度。

/* Hides from IE-Mac \*/
* html .container { height: 1%; }
/* End hide from IE-Mac */

5.  不缓存图片

IE6下默认不缓存背景图片，CSS背景图片每次使用都会重新发送请求(非本地)，CSS里每次更改图片的位置时，连一个hover效果时候同样的背景图片仅仅位置不同而已，ie6都会再次发送请求，解决方法：
1. html {filter:expression(document.execCommand(“BackgroundImageCache”, false, true));} 缺点：可能会使整个页面的加载速度变慢

2 try {
document.execCommand(‘BackgroundImageCache’, false, true);
} catch(e) {}
或者 if ($.browser.msie) {
document.execCommand(“BackgroundImageCache”, false, true);
}
或者<!–[if lt IE 7]>
<script>document.execCommand(“BackgroundImageCache”,false,true);</script>
<![endif]–>