瀏覽器引擎CSS支援比較

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

__TOC__

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

語法與規則
Trident語法與規則附註

!important — 7.0之前,!important並不會蓋掉在同一個宣告區的後面的規則。

@import — 8.0之前,不支援媒體形態。使用@import <URL> <MEDIA>,則IE會要求此URL:「<URL> <MEDIA>」,包括url()及URL裡的引號。無法匯入超過35的樣式表。

Presto語法與規則附註

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

選擇器
一般選擇器附註

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

Trident選擇器附註

:active — 8.0之前,Trident僅支援超連結元素。

:hover — 7.0之前,Trident僅支援超連結元素。

.one.two — 7.0之前,被當成.two類別選擇器處理。

* — 7.0之前這代表「一個或是沒有元素」。

[attr] — 當屬性是colspan的時候,選出所有表格內的td元素及th元素(有沒有之的有colspan屬性都一樣)。這可能不是一個bug,因規格存在模稜兩可的解釋。

:first-letter、:first-line — 在6.0,:first-letter與其他rules一起使用的時候可能有問題。在8.0,在:first-line與:first-letter宣告內的有!important的rules會被省略。

Gecko選擇器附註

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

WebKit選擇器附註

:lang() — 只對寫上lang屬性的元素有效,屬性不繼承。

(:):first-line — text-transform不在此擬元素上作用。

(:):before/after — 有些樣式無法使用於:before與:after擬元素之上,如動畫與轉變。

Presto選擇器附註

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

屬性
一般屬性附註

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

Trident屬性附註

margin — inherit繼承未計算值然後再計算一次而不是直接繼承計算後的值。

display — 7.0之前,支援無誤的只有none、block、inline、table-header-group及table-footer-group。8.0之前,沒支援run-in與table,而inline-block僅支援在行級元素上。

overflow — 7.0之前,overflow: visible;支援的不正確。在8.0,scroll將該元素的高度調至max-height,就算內容並沒有這麼高。

visibility — 8.0之前,未支援「visibility: collapse;」。在8.0,visibility: hidden;的塊元素(@@block翻譯)中「visibility: visible;」的行級元素不被顯示。

content — 在8.0,attr()的算後值不在屬性(attribute)變更時被更新。

border-color — 7.0之前,不支援transparent。

border-style — 8.0之前,不支援hidden。

border-style — 7.0之前,dotted被顯示成dashed。

box-shadow — 9.0之前,trident支援自從5.5就有的類似的專有屬性「Shadow」及「DropShadow」過濾器。

position — 7.0之前,未支援固定配置。7.0跟之後版本只在標準模式的時候支援。

z-index — 8.0之前,僅部份支援z-index。在8.0,除了整數以外也支持浮點數。

list-style-type — 8.0之前,不支援armenian、decimal-leading-zero、georgian、lower-greek、lower-latin、upper-latin。

opacity — 9.0之前,Trident支援一個專有的替代屬性。

background-image — 8.0之前,背景圖片在某些情況下被處理的很糟。

background-attachment — 7.0之前,fixed只被允許使用在body元素上。

background-position — 8.0之前,不支援固定配置。

font-weight — 8.0之前,當取值為600顯示不正確。

text-align — 在8.0,text-align不被:before及:after擬元素繼承。

white-space — 6.0之前,不支援pre。8.0之前,僅部份支援white-space:不支援pre-line及pre-wrap。

writing-mode — Trident支援過期的取值lr-tb、tb-rl、tb-lr等等。這些取值作用在direction上。這是與Webkit不同的行為。

cursor — 仍作用於沒前輟的瀏覽器擴充。

Gecko屬性附註

display — 不支援run-in。1.9之前,不支援「inline-table」與「inline-block」。

z-index — 1.9之前負數的支援情況不佳。

quotes — 1.8之前不支援巢狀引用。

content — 1.9之前不支援「none」。此屬性不作用在一般元素(非擬元素),不符合《CSS 3 生成內容與取代內容模組》。

background-position — 1.7以前的版本使用CSS2語法,非CSS2.1的擴充語法。

font-size-adjust — 1.9之前,僅在視窗版支援。

font-weight — 就算裝了一個字型的Light或Heavy/Black字模,除非使用Gecko 2.0在Windows 7或Windows Vista的DirectWrite,僅Regular與Bold會被使用。

white-space — 1.9.1之前不支援pre-line。1.9之前,以-moz-pre-wrap實驗性地支援pre-wrap的功能。

visibility — 1.8之前不支援collapse。

border-radius — 1.9.1之前,邊框的曲線是圓形而不是同現在CSS3草案記載的橢圓曲線,短宣告border-radius的順序是「左上 右上 右下 左下」而不是W3C的「右上 右下 左下 左上」。當邊框的樣式是點線(dotted)破折線(dashed),曲線總是顯示實線為。

page-break-before; page-break-after — 僅支援「always」與「auto」。

WebKit屬性附註

font — 不支援讓設計師根據使用者作業系統呈現結果的系統字型關鍵字。

font-weight — 就算裝了一個字型的Light或Heavy/Black字模,僅Regular與Bold會被使用。

page-break-before; page-break-after — 僅支援「always」與「auto」。

white-space — 522之前,不支援「pre-line」與「pre-wrap」。

visibility — 522之前不支援「collapse」,這個值的實作跟「hidden」一樣,因此不合標準。

content — 不支援「none」、「open-quote」、「close-quote」、「no-open-quote」、「no-close-quote」及「normal」,且此屬性不作用在一般元素(非擬元素),不符合《CSS 3 生成內容與取代內容模組》。

font-size — 「font-size」屬性不見得吃0這個值,就算用「font-size: 0px」,文字還是看得見。

KHTML屬性附註

overflow — 不支援取值「scroll」與「auto」。

page-break-before; page-break-after — 3.5之前僅支援「always」與「auto」。

visibility — 支援所有的屬性,但「collapse」這個值的實作跟「hidden」一樣,因此不合標準。

Presto屬性附註

counter-increment, counter-reset — 使用推薦標準版本(CSS2)的演算法。

background-position — Presto在Opera 8.0以前的版本使用CSS2語法,非CSS2.1的擴充語法。

font-weight — 當取值為600顯示不正確,與以Trident為對象設計的網站兼容。

visibility — 2.5之前,在表格列裡不支援「collapse」這個值,在表格行裡,這個值呈現與「hidden」同樣的效果因此不合標準。

cursor — 「cursor」不支援動態擬類別,且不支援自定游標。

content — 不支援取值「none」。

font — 不應該吃「inherit」跟一個「font-size」取值的情形,這應該被當作語法錯誤並丟棄,但Opera接受這種狀況。

Prince XML屬性附註

visibility — 不支援取值「collapse」。

|-
! rowspan="4" | CSS2
! <number>
| 浮點數
| rowspan="4"
| rowspan="4"
| rowspan="4"
| rowspan="4"
| rowspan="4"
| rowspan="4"
|-
! <length>
| <number>接單位
|-
! <percentage>
| <number>接%
|-
! <integer>
| 整數
|-
! rowspan="4" | CSS3
! <angle>
| <number>接角度單位
| rowspan="2"
|
|
|
|
|-
! colspan="9" | 顏色
|-
! rowspan="4" | CSS2
! HTML4顏色關鍵字
| 16個預定義網頁顏色
| rowspan="2"
| rowspan="4"
| rowspan="4"
| rowspan="4"
| rowspan="4"
| rowspan="4"
|-
! #rrggbb或#rgb
| 十六進位記法
|-
! rgb(r, g, b)
| RGB記法
|
|-
! 系統顏色
| 28預定義系統顏色
|
|-
! rowspan="6" | CSS3
! SVG顏色關鍵字
|
|
|
|
|
|
|
|-
! currentColor
| color屬性的值
| rowspan="4"
|-
! CSS2
! <url>
| rowspan="5" | 圖像形態
|
|
|
|
|
|
|-
! rowspan="8"| CSS3
! <sprite>
| rowspan="8"
| rowspan="2"
| rowspan="2"
| rowspan="8"
| rowspan="8"
| rowspan="8"
|-
! <image-list>
|-
! <linear-gradient>
| rowspan="6"
| rowspan="4"
|-
! <radial-gradient>
|-
! linear-gradient()
| rowspan="4" | 漸層
|-
! radial-gradient()
|-
! repeating-linear-gradient()
| rowspan="2"
|-
! repeating-radial-gradient()
|-
! colspan="9" | 關鍵字
|-
! rowspan="2"| CSS2
! auto
| 自動
|
| rowspan="2"
| rowspan="2"
| rowspan="2"
| rowspan="2"
| rowspan="2"
|-
! inherit
| 從母元素繼承
|
|-
! CSS3
! initial
|
|
|
|
|
|
|
|-
! colspan="9" | 單位
|-
! rowspan="9" | CSS2
! px
| 像素
| rowspan="9"
| rowspan="9"
| rowspan="9"
| rowspan="9"
| rowspan="9"
| rowspan="9"
|-
! pt
| 點
|-
! pc
| 倍卡
|-
! cm
| 公分
|-
! mm
| 公釐
|-
! in
| 英尺
|-
! em
| 正方
|-
! ex
| X字高
|-
! %
| 百分比
|-
! rowspan="18" | CSS3
! deg
| 度
| rowspan="6"
| rowspan="4"
| rowspan="4"
| rowspan="2"
|-
! s
| 秒
|-
! Hz
| 赫茲
| rowspan="7"
| rowspan="2"
| rowspan="2"
|-
! kHz
| 千赫
|-
! dpi
| dpi
| rowspan="2"
| rowspan="2"
| rowspan="2"
| rowspan="2"
|-
! dpcm
| dpcm
|-
! dppx
| dppx
|
|
|
|
|-
! gd
| 網格數
|
|
|
|
|-
! fr
| 剩餘空間分配數
|
|
|
|
|-
! rem
| 根原素字型大小
| rowspan="5"
| rowspan="3"
| rowspan="3"
| rowspan="3"
|-
! vh
| 視口的高度
|-
! vm
| 視口高度跟寬度小的那個
|-
! ch
| 從字型中抽出的該大小的「0」(ZERO, U+0030)的字形寬度
|
|
|
|
|-
! colspan="3" |
! style="width: 12%" | Trident
! style="width: 12%" | Gecko
! style="width: 12%" | WebKit
! style="width: 12%" | KHTML
! style="width: 12%" | Presto
! style="width: 12%" | Prince XML
|}

取值與單位一般附註

transparent — CSS1引入了「transparent」當作「background-color」的一個值。 CSS2開始允許「border-color」使用「transparent」。《Open eBook(tm) Publication Structure 1.0.1》[OEB101]擴張了「color」屬性使其也吃關鍵字「transparent」。CSS3擴張了顏色的取值使其包含關鍵字「transparent」,使得所有吃的屬性都可以使用這個值,這也簡化了這些屬性在CSS3的定義。

<angle> — 不支援 turn。

取值與單位Trident附註

rect() — 8.0之前,不支援用逗號的正確語法。

auto — 在 Quirks mode(IE5模擬模式),auto不作用在除了表格元素之外的margin屬性上。

transparent — 設color屬性為transparent則字會呈現為黑色。

transparent — 7.0之前,不支援在邊框上的transparent(呈現為實心黑色),且在PNG圖像上被省略。

取值與單位Gecko附註

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

取值與單位Presto附註

<number> — 2.1之前,對於大於20.47的值曾有一個量子化錯誤(不只是em,其他非像素單位也一樣)。

transparent — 當使用屬性 outline-color時此關鍵字會被忽略。版本2.2之前,同樣的情形也發生在屬性color及text-shadow。

一般附註
一般Trident附註

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

一般Gecko附註

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

一般WebKit附註

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

一般KHTML附註

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

一般Presto附註

-o- — 所有實驗中的選取器、屬性、值都有「-o-」作為前輟。例如:是-o-transition-property而不是transition-property。

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

瀏覽器自定樣式的DOM表現

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

參見
規格
Trident相關
Gecko相關
Webkit相關
Presto相關
Prince XML相關
其他參見
*
*
*
*
*
*
*
*
*
*
*

外部連結

评论 (0)

  • 还没有评论,来抢沙发吧。