IE6、IE7、IE8的CSS、JS相容

Internet Explorer 6中檢視使用 Microsoft JScript 的網頁，可能會遇到web浏覽器速度較慢的性能問題。原因是如果js腳本同時建立大量變量，jscript引擎執行垃圾收集算法時會監視腳本中變量配置設定的數量、腳本中使用的文字值的數量和腳本中配置設定的字元串值的總大小，如果超過這些值的門檻值，就會發生垃圾收集，垃圾收集程序會中斷正在運作的腳本。是以，這些運作中的腳本将被挂起，直至垃圾收集完成為止。

IE6 、 IE7 、 IE8 在 CSS 和 JS 方面的差別 :

1、IE8中的css中關于width或是height中如果使用像素形式作為參數時，參數必須是帶“px”的，而且此參數必須是大于0的，而在IE6和IE7中是支援不帶“px”參數的，而且參數是可以為一個負數。

2、如:style=height:180px\\0;隻有IE8能識别,style=height:180px\\9,IE都能識别。

2、IE8中的css中“border-style:outset ;”是沒有效果的。

3、IE8中的無序清單之間的距離要比IE6和IE7大的多。

4、IE6能識别*，但不能識别!important,IE7能識别*也能識别!important。

5、IE6支援下劃線，IE7不支援下劃線。

6、在IE8中，一個Iframe中取event.x的值不是Iframe中的相對x坐标，而是最外層的window的x坐标，但是event.y卻是取的是 Iframe中的相對y坐标。而在IE6和IE7中，event.x和event.y卻得的都是所在Iframe中的相對坐标，可以用 event.clinetX代替。

7、IE8中的javascript中的function對象例如：

function a(){alert(“helloworld”);}

var fun = new function(‘’,’helloworld’);

alert(fun);

此時傳回的值為function anonymous(){function a(){alert(“helloworld”)}}, 而在IE6和IE7中傳回的值為function anonymous(){alert("helloworld")},也就是說當Function的第二個參數如果是一個函數時，IE8對此參數作用的是整個函數的代碼，而IE6和IE7則是對此參數起作用的是函數的内部代碼（不包括 “function a（）{”和“}”的函數頭和尾）。

8、在ie6中，使用window.status =" 歡迎光臨我的部落格！！！",就能在狀态欄顯示這麼一行字，但在IE7中，IE7的安全性設定中，預設是不允許腳本更新狀态欄的.

9、IE8會把對 IE6,7,8 用 css 進行測試：

測試代碼：樣式代碼： p {color:#f00;} xhtml 代碼：  

 文字

IE6

IE7

IE8

備注

p{_color:red}

√

×

IE6 專用

*html   p{color:#red;}

p{+color:red}

IE6,7 專用

p{*color:red}

*html   p{color:red;}

p{*+color: red}

IE7 專用

Body> p{ color: red }

屏蔽 IE6

/*\\*//*/p{+color:red}/**/

IE8 專用

p{/*/*/color;/**/}

屏蔽 IE8

p{color:red!important}

p{color:red}

都能用

html>/**/body .head{color:#red;}

隻對 IE8

對于 IE8 對 js 新增的功能 :

1、 IE8開始支援一些新的W3C規格，其中多了querySelector和querySelectorAll兩個函數

2、 IE8 引入XDomainRequest跨站資料擷取功能。 這是一個非常有趣的進行跨站資料擷取的功能，不過它與Firefox 3中的跨站 XMLHttpRequest的工作原理不太一樣。它的跨域并不是無限制的。需要服務端傳回http header中帶有XDomainRequestAllowed=1才可以跨域，否則是不成功的。XMLRequest 不能跨站一直都是多子域伺服器的硬傷。使得很多情況不得不考慮最原始的動态script和JSON的方式。不過IE8團隊有意解決跨站通路資料的問題，這是IE8的一個進步。另外，IE8下的XMLHttpRequest增加了一個很重要的屬性 timeout和ontimeout方法，它在對程式進行優化時極其重要。

3、 getElementById可以通過id來傳回對象。getAttribute("checked") 現在傳回“checked”而不是true。動态建立（或修改）的單選按鈕現在可以被選擇了。

支援更多對HTML5的功能:

1、 window.location.hash。這個功能已經被多數浏覽器支援的非常好。在IE8标準模式中将window.location.hash中的更改作為導航，并儲存先前文檔的URL，可以像在Ajax應用中模仿“後退”按鈕效果。IE8中對它進行了改良，可以廣播這個hashchanged時間。

2、 DOM存儲。通過這個功能，資料可以持續儲存在本地，它将取代原始的cookie存DOM存儲。

3、 postMessage。IE8現在支援跨檔案消息通訊（Cross-Document Messaging-XDM）！通過onmessage事件和postMessage方法，兩個來自不同域的網頁可以進行通訊。目前IE8、Opera 9、Firefox 3和WebKit nightlies版均支援這個功能，也就是說，該功能幾乎已被所有最新浏覽器支援。

4、 Offline Events。在IE 8中擁有一些離線事件來檢測網絡的中斷，通過它我們可以編寫精彩的離線Ajax應用。目前來看支援這一功能的浏覽器包括Firefox3和IE8。

用firefox或者chrome一登陸最小系統就報480分鐘逾時錯誤

IE6 Bugs

1 、不支援用樣式設定 <abbr> 元素

2 、不支援以連字元和下劃線開頭的 class 和 ID 名

3 、 <select> 元素總是出現在堆疊最上面，而無視 z-index 值

4 、如果錨點的僞類沒有使用正确的順序 ( :link , :visited , :hover ) ，:hover 僞類将無效

5 、一個屬性的 !important 聲明會被同一規則中同一屬性的沒有使用 !important 的第二個聲明覆寫。

6、         height 表現類似于 min-height ， width 表現類似于 min-width ，左右 margin 雙倍

7、         圓點邊框 (dotted) 看起來像虛線邊框 (dashed)

8、         text-decoration 的 line-through 值在文字上看起來比别的浏覽器要高一些

9 、有序清單如果有一個固定結構 (haslayout 為 true ，不能設定 li 的高度 / 寬度 /zoom 等激活 haslayout 的值 ) ，序号就不會增加，而是保持為 1

10、      清單元素不支援 list-style-type 的所有可用的值

11、      如果清單條目浮動，指定的 list-style-image 将不會顯示

12、      不完全支援 @font-face

13、      某些選擇器會錯誤的比對注釋和文檔聲明

14、      如果一個 ID 選擇器結合一個類選擇器不比對，同樣的 ID 選擇器結合不同的類選擇器也将被當作不比對。

IE7 bugs

1 、 有序清單如果有一個固定結構 (haslayout 為 true ，不能設定 li 的高度 / 寬度 /zoom 等激活 haslayout 的值 ) ，序号就不會增加，而是保持為 1

2、         清單元素不支援 list-style-type 的所有可用的值

3 、如果清單條目浮動，指定的 list-style-image 将不會顯示

4 、不完全支援 @font-face

5 、某些選擇器會錯誤的比對注釋和文檔聲明

本文轉自hoojo部落格園部落格，原文連結：http://www.cnblogs.com/hoojo/archive/2011/01/13/1934373.html，如需轉載請自行聯系原作者