Internet Explorer 相容性中心
注意：本文件只是初步文件，日後可能隨時異動。
Windows Internet Explorer 8 是歷來最符合各種標準的版本， 可 完全支援階層式樣式表 (CSS) Level 2.1、增強 了 對 CSS 3 的支援、改進 了 對 HTML 4.01 的支援，且 可 強力支援 HTML 5。 因為加強了對 HTML 元素的支援，所以網頁開發人員現在可以建置更易懂和更易存取的 HTML 標記。 本文將討論 Windows Internet Explorer 8 在 HTML 與 CSS 支援方面的行為變更，以及這些變更對網頁開發人員的影響。
HTML 的支援
為了協助開發人員充份運用 HTML 4.01 提供的元素 ， 以及更忠實地表現網頁開發人員所要表達的語意含義 ， Windows Internet Explorer 升級對下列表現元素的支援 ：
P 元素：代表邏輯段落。
OBJECT 元素：可代表任何物件，包括影像。
自動封閉 P 元素
現在，未封閉的P 元素之後若是接著TABLE、FORM、NOFRAMES或NOSCRIPT元素，將會自動封閉。
<html>
<head>
<title>Simple P Element Closing Example</title>
<meta http-equiv="X-UA-Compatible" content="IE8"/>
</head>
<body>
<p>This is the first paragraph</p>
<p style="margin-left:30px">This is another paragraph. <!-- P not closed -->
<table border="1px" cellpadding="2px">
<tr><td>This is a table cell.</td></tr>
</table>
<p>This is a third paragraph.</p>
</body>
</html>
在此範例中 ， 第二個 P 元素 並未封閉。使用 Windows Internet Explorer 7 檢視時 ， TABLE 元素 會顯示為第二個 P 元素 的子 元素 。第二個 P 元素會 從視窗的左邊界縮排 30 個像素。因為 TABLE 是 P 元素 的子 元素 ， 所以也會從視窗的左邊界縮排。不過 ， 若是使用 Windows Internet Explorer 8 的預設模式檢視 ， TABLE 元素就 會與左邊界對齊。 由於 Windows Internet Explorer 8 會在顯示 TABLE 元素之前，先自動封閉未封閉的 P 元素 ， 所以 TABLE 元素是該元素的子元素。
使用 OBJECT 元素來顯示影像
Windows Internet Explorer 8 現在可以使用 OBJECT 元素 來顯示影像。 以往在舊版瀏覽器中使用此元素顯示影像時 ， 會自動為影像加上捲軸和框線 ， 時常造成影像無法正確地顯示。
在 Windows Internet Explorer 8 中 ， OBJECT 元素 會如同使用 IMG 元素 內嵌影像一般地顯示影像。若要在您的網頁中使用此行為 ， 請將 OBJECT 元素 的 DATA 屬性 設定為影像的 URL 。您也可以在 DATA 屬性中內嵌 dataURL 。 如需詳細資訊 ， 請參閱 資料繫結 。
如果要讓 Windows Internet Explorer 使用較舊版本的行為 ， 來將影像載入 OBJECT 元素 ， 請為網頁選擇較舊的 相容模式 ， 或者將 OBJECT 元素的 TYPE 屬性 設定為 text/html 。
強化的物件後援
OBJECT 元素 若是無法載入資源 ， 會改成呈現 OBJECT 元素 中的內容。 這稱為物件後援 ， 因為它可讓您定義一個策略 ， 讓 Windows Internet Explorer 在發生錯誤時使用此策略來「後援」。
Windows Internet Explorer 7 推出了巢狀 OBJECT 元素的能力 ； 也就是 ， 使用多個 OBJECT 元素建立更豐富的後援策略 ， 如以下範例所示。
<object data="..."type="silverlight" >
<object data="..."type="windows media file">
<object data="..."type="image/png">
Wow!Everything went wrong.Sorry.
</object>
</object>
<object>
這個範例使用三個 OBJECT 元素，來定義一個物件後援策略。它會先嘗試載入 Silverlight 應用程式。如果失敗，則會要求 Microsoft Windows Media 檔案。若是無法載入 Windows Media 檔案，範例就會載入一個影像。
如果使用 Windows Internet Explorer 7 檢視這個範例，會看到影像，但是網頁的文件物件模型 (Document Object Model，DOM) 中只會有一個 OBJECT 元素，因為 Windows Internet Explorer 7 不會為無法載入的物件建立 OBJECT 元素。
如果使用 Windows Internet Explorer 8 檢視範例，就會看到影像，而且網頁的 DOM 中會有三個 OBJECT 元素。前兩個 OBJECT 元素會因為無法載入而停用。不過，您可以使用 JavaScript 搜尋這些元素。
注意 ： 必須重新整理網頁或使用 JavaScript 載入新物件 ， 才能重新啟用非作用中的物件。
Windows Internet Explorer 8 只會針對通訊相關的錯誤使用此嶄新後援行為；也就是說，只有當載入要求產生用戶端 (4xx) 或伺服器 (5xx) 的HTTP 錯誤回應時，才會採用此行為。如果因其他原因導致要求失敗，例如內容格式錯誤或 ActiveX 控制項損毀，則會採用原始後援行為。如需 HTTP 回應碼的詳細資訊，請參閱HTTP 回應標頭。
HTML 5 / AJAX 增強功能
Windows Internet Explorer 8 的 HTML 5 增強功能包含 ： AJAX 巡覽、 DOM 儲存、跨文件訊息 (XDM) 以及連線事件。 這些都是密切配合 W3C HTML 5.0 Working Draft 所開發的。如需詳細資訊 ， 請參閱 AJAX - AJAX 巡覽簡介 、 DOM 儲存簡介 、 AJAX - Internet Explorer 8 中的 XMLHttpRequest 增強功能 以 及 AJAX - Internet Explorer 8 中的連線增強功能 。
AJAX 巡覽
使用 AJAX 的顯著優勢之一 ， 是不需要傳統的網頁巡覽就能更新網頁內容。更新時 ， 若無法儲存網頁的狀態並通知其元件 ， 在某些情況下可能會造成問題 ， 因為 [ 網址 ] 列和 [ 上一頁 ] 與 [ 下一頁 ] 按鈕等元件只有在網頁巡覽後才會更新。因此 ， 瀏覽器不會在 (Travelog) 中 儲存 AJAX 內容的變更 ， 或者更新 [網址] 列等元件。使用者會以為瀏覽器似乎一直停在舊內容 而 感到困惑。 在 IE8 模式中 ， Windows Internet Explorer 會 將 window.location.hash 的 更新當成巡覽處理 ， 並儲存先前文件的 URL 。
DOM 儲存
現在的網頁會使用 document.cookie 屬性將資料儲存在本機電腦上。 Cookie 的功能有限 ， 因為網站針對每個網域只能儲存 50 個鍵 / 值組。此外 ， Cookie 程式設計模型比較費事 ，因為 需要剖析整個 Cookie 字串才能取得資料。 W3C 的 HTML 5 DOM 儲存物件會為鍵 / 值組合的字串資料，提供更簡單的全域和工作階段儲存模型。 網站可在索引標籤的整個存留期間儲存資料，或儲存資料直到網站或使用者清除資料為止。
每個網域 ( 包括其子網域 ) 均 擁有 10 MB 的本機儲存空間。這有助於降低跨網域攻擊的風險。同樣地 ， 每個瀏覽器索引標籤都有自己的工作階段存放區。 DOM 儲存只是 Web 應用程式單純儲存資料的機制，其背後沒有資料庫。 例如，其中無法執行複雜的查詢，像是根據值的查詢。
跨文件訊息 (XDM)
瀏覽器的網站原始原則會阻止網頁從其他網域取得資料。這表示同一網頁上的不同網域，無法互相通訊以提供更全面的體驗。網站因應此原則的方法是，建立巢狀 IFrames 並擷取透過 URL 傳輸的資料。網站採用的另一種解決方法是，直接裝載來自其他網域的指令碼和其他資源檔。第二種方法只能進行單向通訊。 這也具有安全性風險 ， 因為內嵌的指令碼和資源檔會使用與主網站相同的權限執行 ， 並且能夠存取使用者的資料 ， 例如儲存在 Cookie 中的資料。
XDM 會 提供視窗物件的 postMessage 方法 ， 讓不同網域在共同同意後互相通訊。 XDM 所 提供的方法比上述因應方法更簡單 、 效能更高，可有效驅動雙向的跨網域通訊機制。
連線事件
Windows Internet Explorer 8 可讓網頁透過 window.navigator.onLine 屬性和線上 / 離線事件 ， 偵測瀏覽器是在線上或離線。有了此資訊 ， 就能夠使用 DOM 儲存物件提供豐富的離線功能。例如 ， 使用者若在登入 Live Mail 網頁後中斷連線 ， 網頁即可提示使用者將草稿儲存在 DOM 存放區中 ， 並允許使用者繼續編輯郵件。 恢復連線後，指令碼就可以擷取電子郵件並傳送至伺服器。
如需詳細資訊 ， 請參閱 AJAX - Internet Explorer 8 中的連線增強功能 。
CSS 的支援
Windows Internet Explorer 的每個新版本都不斷加強對 CSS 標準的支援，已累積可完整支援 CSS 2.1 的完整支援。下列表格顯示 Windows Internet Explorer 8 對於各項增強的 CSS 屬性支援(相較於 Windows Internet Explorer 7)。這些表格並未顯示 Windows Internet Explorer 8 支援之 CSS 屬性的完整清單；只顯示以往 Windows Internet Explorer 7 並未支援或只有部分支援，但在 Windows Internet Explorer 8 可支援的 CSS 屬性。如需 Windows Internet Explorer 之 CSS 相容性的詳細資訊以及完整的 CSS 元素支援表格，請參閱CSS 相容性與 Internet Explorer。
資料格中的值若為「部分」，表示在該版本的 Windows Internet Explorer 中只實作了部分功能。如需詳細資訊，請按一下連結以檢視該功能在 MSDN 上的參考網頁。
虛擬類別
| CSS 2.1 | IE 7.0 | IE 8.0 | |
|---|---|---|---|
:active { sRules } |
部分 |
有 |
|
:after { sRules } |
沒有 |
有 |
|
:before { sRules } |
沒有 |
有 |
|
:focus { sRules } |
沒有 |
有 |
|
:lang(C) { sRules } |
:lang() |
沒有 |
有 |
清單
| CSS 2.1 | IE 7.0 | IE 8.0 | |
|---|---|---|---|
{ list-style-type :sStyle } |
部分 |
有 |
色彩與背景
| CSS 2.1 | IE 7.0 | IE 8.0 | |
|---|---|---|---|
{ background-position :sPosition } |
部分 |
有 |
字型與文字
| CSS 2.1 | IE 7.0 | IE 8.0 | |
|---|---|---|---|
{ font-weight :sWeight } |
部分 |
有 |
|
{ white-space :sWrap } |
部分 |
有 |
|
{ word-spacing :sSpacing } |
部分 |
有 |
產生的內容
| CSS 2.1 | IE 7.0 | IE 8.0 | |
|---|---|---|---|
{ content :sContent } |
沒有 |
有 |
|
{ counter-increment :sCounter } |
沒有 |
有 |
|
{ counter-reset :sCounter } |
沒有 |
有 |
|
{ quotes :sQuotes } |
quotes |
沒有 |
有 |
框線與 版面 配置
| CSS 2.1 | IE 7.0 | IE 8.0 | |
|---|---|---|---|
{ border-collapse :sCollapse } |
部分 |
有 |
|
{ border-spacing :sSpacing } |
沒有 |
有 |
|
{ border-style :sStyle } |
部分 |
有 |
|
{ caption-side :sLocation } |
沒有 |
有 |
|
{ empty-cells :sEmptyCells } |
empty-cells |
部分 |
有 |
位置
| CSS 2.1 | IE 7.0 | IE 8.0 | |
|---|---|---|---|
{ bottom :sBottom } |
部分 |
有 |
|
{ display :sDisplay } |
部分 |
有 |
|
{ left :sPosition } |
部分 |
有 |
|
{ right :sPosition } |
部分 |
有 |
|
{ top :sTop } |
部分 |
有 |
|
{ z-index :vOrder } |
部分 |
有 |
列印
| CSS 2.1 | IE 7.0 | IE 8.0 | |
|---|---|---|---|
{ orphans :nLines } |
沒有 |
有 |
|
{ page-break-inside :sBreak } |
沒有 |
有 |
|
{ widows :nLines } |
沒有 |
有 |
使用者介面
| CSS 2.1 | IE 7.0 | IE 8.0 | |
|---|---|---|---|
{ outline :sOutline } |
沒有 |
有 |
|
{ outline-color :sColor } |
沒有 |
有 |
|
{ outline-style :sStyle } |
沒有 |
有 |
|
{ outline-width :sWidth } |
沒有 |
有 |
| CSS 3 | IE 7.0 | IE 8.0 | |
|---|---|---|---|
{ box-sizing :sSizing } |
box-sizing |
沒有 |
有 |
函 數
| CSS 2.1 | IE 7.0 | IE 8.0 |
|---|---|---|
counter() |
沒有 |
有 |
attr() |
沒有 |
有 |
關鍵字
| CSS 2.1 | IE 7.0 | IE 8.0 |
|---|---|---|
Inherit |
沒有 |
有 |
如需 Windows Internet Explorer 中之 CSS 相容性的詳細資訊以及完整的支援表格，請參閱CSS 相容性與 Internet Explorer。