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。