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]–>