瀏覽器引擎比較_(CSS)

以下的表格顯示一些瀏覽器引擎對於 CSS 的相容性與支援的比較。想獲得更多訊息，請參照各產品的項目。此項目不見得包含所有的功能也不見得有最新訊息。除非以附註指出特例，這裡以未加裝任何套件或是其他程式的穩定版本進行比較。

## 表格說明

### 引擎命名

這裡使用後端的引擎名而不是瀏覽器的名稱。使用各瀏覽器引擎的瀏覽器如下表所示。

 

### 取值

以下各格的顏色表示該排版引擎的最新版本或指定版本（如果給出版本號的話）對該功能的支援程度。沒有取值的版本號表示該排版引擎首次完全支援該功能。

## CSS 版本支援

想了解各版本的 CSS 差異，請參考項目 CSS。 本表格不以 CSS2.0 為準，因為存在取代它的 CSS2.1。CSS2.1 修正了部份 CSS2.0 的錯誤，刪除了不被 CSS 社區接受的功能。大部分被刪除的功能將會出現在 CSS3。

## 語法與規則

### Trident 語法與規則附註

1. !important — 7.0 之前，`!important` 並不會蓋掉在同一個宣告區的後面的規則。
2. @import — 8.0 之前，不支援媒體形態。使用 `@import <URL> <MEDIA>`，則 IE 會要求此 URL：「`<URL> <MEDIA>`」，包括 `url()` 及 URL 裡的引號。無法匯入超過 35 的樣式表。

 

### Presto 語法與規則附註

1. @import — 儘管 Gecko、WebKit 及 iCab 會立即下載所有樣式表，Opera 只下載媒體名為「handheld」、「print」、「projection」、「screen media」、「speech」（當聲音功能在啟動狀態）、「tv」（電視裝置）。文字瀏覽器類比模式僅為一個使用者樣式表而不用媒體形態「tty」。這是符合不支援 CSS 的老舊文字瀏覽器的。

## 選擇器

### 一般選擇器附註

1. :read-only 與:read-write — Presto 與 KHTML 皆不正確地處理有 `contenteditable` 屬性的元素。

### Trident 選擇器附註

1. :active — 8.0 之前，Trident 僅支援超連結元素。
2. :hover — 7.0 之前，Trident 僅支援超連結元素。
3. .one.two — 7.0 之前，被當成 `.two` 類別選擇器處理。
4. \* — 7.0 之前這代表「一個或是沒有元素」。
5. [attr] — 當屬性是 `colspan` 的時候，選出所有表格內的 `td` 元素及 `th` 元素（有沒有之的有 `colspan` 屬性都一樣）。這可能不是一個 bug，因規格存在模稜兩可的解釋。
6. :first-letter、:first-line — 在 6.0，`:first-letter` 與其他 rules 一起使用的時候可能有問題。在 8.0，在 `:first-line` 與 `:first-letter` 宣告內的有 `!important` 的 rules 會被省略。

### Gecko 選擇器附註

1. (:):before, (:):after — 在 1.9.1 之前，有些屬性不能使用（這是 CSS2.0 的過期解釋）。

### WebKit 選擇器附註

1. :lang() — 只對寫上 `lang` 屬性的元素有效，屬性不繼承。
2. (:):first-line — `text-transform` 不在此擬元素上作用。
3. `(:):before/after` — 有些樣式無法使用於 `:before` 與 `:after` 擬元素之上，如動畫與轉變。

### Presto 選擇器附註

1. :target — 在 2.5 之前，樣式在以向前向後按鈕瀏覽的時候不作用。

## 屬性

### 一般屬性附註

1. `text-decoration` — Gecko 或 Webkit 的底線有可能會畫過行級 (@@inline 翻譯) 取代元素（例如圖片）。

### Trident 屬性附註

1. margin — `inherit` 繼承未計算值然後再計算一次而不是直接繼承計算後的值。
2. display — 7.0 之前，支援無誤的只有 `none`、`block`、`inline`、`table-header-group` 及 `table-footer-group`。8.0 之前，沒支援 `run-in` 與 `table`，而 `inline-block` 僅支援在行級元素上。
3. overflow — 7.0 之前，`overflow: visible;` 支援的不正確。在 8.0，`scroll` 將該元素的高度調至 `max-height`，就算內容並沒有這麼高。
4. visibility — 8.0 之前，未支援「`visibility: collapse;`」。在 8.0，`visibility: hidden;` 的塊元素 (@@block 翻譯) 中「`visibility: visible;`」的行級元素不被顯示。
5. content — 在 8.0，`attr()` 的算後值不在屬性 (attribute) 變更時被更新。
6. border-color — 7.0 之前，不支援 `transparent`。
7. border-style — 8.0 之前，不支援 `hidden`。
8. border-style — 7.0 之前，`dotted` 被顯示成 `dashed`。
9. box-shadow — 9.0 之前，trident 支援自從 5.5 就有的類似的專有屬性「Shadow」及「DropShadow」過濾器。
10. position — 7.0 之前，未支援固定組態。7.0 跟之後版本只在標準模式的時候支援。
11. z-index — 8.0 之前，僅部份支援 `z-index`。在 8.0，除了整數以外也支援浮點數。
12. list-style-type — 8.0 之前，不支援 `armenian`、`decimal-leading-zero`、`georgian`、`lower-greek`、`lower-latin`、`upper-latin`。
13. opacity — 9.0 之前，Trident 支援一個專有的替代屬性。
14. background-image — 8.0 之前，背景圖片在某些情況下被處理的很糟。
15. background-attachment — 7.0 之前，`fixed` 只被允許使用在 `body` 元素上。
16. background-position — 8.0 之前，不支援固定組態。
17. font-weight — 8.0 之前，當取值為 600 顯示不正確。
18. text-align — 在 8.0，`text-align` 不被 `:before` 及 `:after` 擬元素繼承。
19. white-space — 6.0 之前，不支援 `pre`。8.0 之前，僅部份支援 `white-space`：不支援 `pre-line` 及 `pre-wrap`。
20. writing-mode — Trident 支援過期的取值 `lr-tb`、`tb-rl`、`tb-lr` 等等。這些取值作用在 `direction` 上。這是與 Webkit 不同的行為。
21. cursor — 仍作用於沒前輟的瀏覽器擴充。

### Gecko 屬性附註

1. display — 不支援 `run-in`。1.9 之前，不支援「`inline-table`」與「`inline-block`」。
2. z-index — 1.9 之前負數的支援情況不佳。
3. quotes — 1.8 之前不支援巢狀參照。
4. content — 1.9 之前不支援「`none`」。此屬性不作用在一般元素（非擬元素），不符合《CSS 3 生成內容與取代內容模組》。
5. background-position — 1.7 以前的版本使用 CSS2 語法，非 CSS2.1 的擴充語法。
6. font-size-adjust — 1.9 之前，僅在視窗版支援。
7. font-weight — 就算裝了一個字型的 Light 或 Heavy/Black 字模，除非使用 Gecko 2.0 在 Windows 7 或 Windows Vista 的 DirectWrite，僅 Regular 與 Bold 會被使用。
8. white-space — 1.9.1 之前不支援 `pre-line`。1.9 之前，以 `-moz-pre-wrap` 實驗性地支援 `pre-wrap` 的功能。
9. visibility — 1.8 之前不支援 `collapse`。
10. border-radius — 1.9.1 之前，邊框的曲線是圓形而不是同現在 CSS3 草案記載的橢圓曲線，短宣告 `border-radius` 的順序是「左上 右上 右下 左下」而不是 W3C 的「右上 右下 左下 左上」。當邊框的樣式是點線 (dotted) 破折線 (dashed)，曲線總是顯示實線為。
11. page-break-before; page-break-after — 僅支援「`always`」與「`auto`」。

### WebKit 屬性附註

1. font — 不支援讓設計師根據使用者作業系統呈現結果的系統字型關鍵字。
2. font-weight — 就算裝了一個字型的 Light 或 Heavy/Black 字模，僅 Regular 與 Bold 會被使用。
3. page-break-before; page-break-after — 僅支援「`always`」與「`auto`」。
4. white-space — 522 之前，不支援「`pre-line`」與「`pre-wrap`」。
5. visibility — 522 之前不支援「`collapse`」，這個值的實作跟「`hidden`」一樣，因此不合標準。
6. content — 不支援「`none`」、「`open-quote`」、「`close-quote`」、「`no-open-quote`」、「`no-close-quote`」及「`normal`」，且此屬性不作用在一般元素（非擬元素），不符合《CSS 3 生成內容與取代內容模組》。
7. font-size — 「`font-size`」屬性不見得吃 0 這個值，就算用「font-size: 0px」，文字還是看得見。

### KHTML 屬性附註

1. overflow — 不支援取值「`scroll`」與「`auto`」。
2. page-break-before; page-break-after — 3.5 之前僅支援「`always`」與「`auto`」。
3. visibility — 支援所有的屬性，但「`collapse`」這個值的實作跟「`hidden`」一樣，因此不合標準。

### Presto 屬性附註

1. counter-increment, counter-reset — 使用推薦標準版本 (CSS2) 的演算法。
2. background-position — Presto 在 Opera 8.0 以前的版本使用 CSS2 語法，非 CSS2.1 的擴充語法。
3. font-weight — 當取值為 600 顯示不正確，與以 Trident 為物件設計的網站相容。
4. visibility — 2.5 之前，在表格列裡不支援「`collapse`」這個值，在表格行裡，這個值呈現與「`hidden`」同樣的效果因此不合標準。
5. cursor — 「`cursor`」不支援動態擬類別，且不支援自訂游標。
6. content — 不支援取值「`none`」。
7. font — 不應該吃「`inherit`」跟一個「font-size」取值的情形，這應該被當作語法錯誤並丟棄，但 Opera 接受這種狀況。

### Prince XML 屬性附註

1. visibility — 不支援取值「`collapse`」。
2. list-style — 不支援取值「`armenian`」與「`georgian`」。
3. content — 不支援取值「`open-quote`」與「`close-quote`」。

## 取值與單位

### 取值與單位一般附註

1. transparent —  
> CSS1 引入了「transparent」當作「background-color」的一個值。 （頁面存檔備份，存於網際網路檔案館） CSS2 開始允許「border-color」使用「transparent」。《Open eBook (tm) Publication Structure 1.0.1》[OEB101] 擴張了「color」屬性使其也吃關鍵字「transparent」。CSS3 擴張了顏色的取值使其包含關鍵字「transparent」，使得所有吃 <value> 的屬性都可以使用這個值，這也簡化了這些屬性在 CSS3 的定義。
> 
>
2. <angle> — 不支援 `turn`。

### 取值與單位 Trident 附註

1. rect() — 8.0 之前，不支援用逗號的正確語法。
2. auto — 在 Quirks mode（IE5 類比模式），`auto` 不作用在除了表格元素之外的 `margin` 屬性上。
3. transparent — 設 `color` 屬性為 `transparent` 則字會呈現為黑色。
4. transparent — 7.0 之前，不支援在邊框上的 `transparent`（呈現為實心黑色），且在 PNG 圖像上被省略。

### 取值與單位 Gecko 附註

1. <ch> — 版本 1.9.1 之前，用「M」的字形寬度 而非「0」的字形寬度。

### 取值與單位 Presto 附註

1. <number> — 2.1 之前，對於大於 20.47 的值曾有一個量子化錯誤（不只是 em，其他非像素單位也一樣）。
2. transparent — 當使用屬性 outline-color 時此關鍵字會被忽略。版本 2.2 之前，同樣的情形也發生在屬性 color 及 text-shadow。

## 一般附註

### 一般 Trident 附註

1. `-ms-` — 所有實驗中的選取器、屬性、值都有「-ms-」作為前輟。例如：是 `-ms-interpolation-mode` 而不是 `interpolation-mode`。

### 一般 Gecko 附註

1. `-moz-` — 所有實驗中的選取器、屬性、值都有「-moz-」作為前輟。例如：是 `::-moz-selection` 而不是 `::selection`。

### 一般 WebKit 附註

1. `-webkit-` — 所有實驗中的選取器、屬性、值都有「-webkit-」作為前輟。例如：是 `-webkit-box-shadow` 而不是 `box-shadow`。

### 一般 KHTML 附註

1. `-khtml-` — 所有實驗中的選取器、屬性、值都有「-khtml-」作為前輟。例如：是 `-khtml-opacity` 而不是 `opacity`。

 

### 一般 Presto 附註

1. `-o-` — 所有實驗中的選取器、屬性、值都有「-o-」作為前輟。例如：是 `-o-transition-property` 而不是 `transition-property`。
2. `-xv-` — 所有實驗中的《CSS3 口說模組 (@@翻譯)》選取器、屬性、值都有「-o-」作為前輟。例如：是 `-xv-voice-rate` 而不是 `voice-rate`。

 

### 瀏覽器自訂樣式的 DOM 表現

1. 實驗中的 CSS 瀏覽器自訂屬性的對照 DOM 屬性沒有連字號，且第一個字母為大寫。例如：`element.style.MozBorderRadius` 對應於 `-moz-border-radius` 屬性、`element.style.OTransform` 對應於 `-o-transform` 屬性。

## 參見

### 規格

### Trident 相關

### Gecko 相關

### Webkit 相關

### Presto 相關

### Prince XML 相關

### 其他參見

## 外部連結

* WebDevout （頁面存檔備份，存於網際網路檔案館）—— 以視窗瀏覽器的臭蟲測試為主要導向。
* Can I Use （頁面存檔備份，存於網際網路檔案館）—— 展示各大瀏覽器對 HTML5、CSS3 的支援程度。
* The CSS3 Test （頁面存檔備份，存於網際網路檔案館）—— 測試各大瀏覽器對 CSS3 的支援程度。
* Mozilla Developer Network 上面的 CSS 相關資料 （頁面存檔備份，存於網際網路檔案館）