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