【譯】表單元件的屬性相容性表

Levon發表於2019-02-16
元件

下面的相容性表將總結出HTML表單對CSS的支援程度，由於CSS和HTML表單的複雜性，這幾個表不能認為是最佳的參考物件。儘管如此，它們也能讓你更瞭解能做什麼、不能做什麼，這將有助於你學習如何開發。

如何閱讀這些表格

值

各個屬性都有如下四個可能的值：
YES
具有可靠而一致的跨瀏覽器支援。但你可能還得在某些邊際情況下面對一些奇怪的副作用。

PARTIAL
當該屬性生效時，你可能會頻繁遇見那些奇怪的副作用或者不一致性。最好避免使用這些屬性，除非你能掌控這些副作用。

NO
該屬性不能生效，或者表現很不一致以至於不可靠。

N.A
該屬性對於這類元件來說沒有什麼意義。

效果

每種屬性都有兩種可能的效果：
N(Normal)
指該屬性被直接應用。

T(Tweaked)
指該屬性和下列額外規則一起使用：

* {
/* 在Webkit瀏覽器下禁用原生的外觀和效果 */
  -webkit-appearance: none;

/* 在Gecko瀏覽器下禁用原生的外觀和效果 */
  -moz-appearance: none;

/* 在幾個不同的瀏覽器下禁用原生的外觀和效果，包括Opera,Internet Explorer和Firefox */
  background: none;
}

相容性表

統一行為

在整體水平上，一些行為對於多數瀏覽器來說是一致的：

border, background, border-radius, height
在一些瀏覽器上，使用這些屬性可以部分或者完全禁止元件的原生外觀和體驗。所以使用時請小心。

line-height
該屬性的跨瀏覽器支援很不一致，得避免使用它。

text-decoration
在表單元件上，Opera不支援該屬性。

text-overflow
在表單元件上，Opera，safari 和 IE9不支援該屬性。

text-shadow
在表單元件上Opera不支援該屬性，而IE9乾脆就完全不支援它。

譯註：由於表格內容比較複雜、使用markdown難以表現原有格式，而且考慮到這些表格更多隻是讓我們做個參考、閱讀難度也不是很大。所以下文將只會摘取相容性表中一些屬性的說明作翻譯，完整表格請參照原文。^_^

文字框

屬性 備註
height 1.Webkit瀏覽器（多數指Mac OSX和iOS上的）對搜尋框使用了原生的外觀和效果。所以得使用-webkit-appearance:none來讓搜尋框能使用該屬性。
2.在Windows7上，IE9不會應用到邊框，除非使用了background:none。
border 同上
padding 同上
color 1.若未設定border-color屬性，某些Webkit瀏覽器會給<textarea>的邊框和字型都使用color屬性。
font 參見line-height的備註
text-decoration 參見Opera的備註
text-indent 1.IE9只在<textarea>上支援該屬性，而Opera只在單行文字框上支援它。
background 同height
border-radius 1.同height。
2.Opera上的border-radius屬性只在明確設定了邊框後才生效。
box-shadow 1.IE9不支援該屬性。

按鈕

屬性 備註
height 1.該屬性不會在Mac OSX上的Webkit瀏覽器上生效。
padding 同上
font 參見line-height的備註
border-radius 1.Opera上的border-radius屬性只在明確設定了邊框後才生效。
box-shadow 1.IE9不支援該屬性。

數字

在實現了number元件的瀏覽器上，沒有統一的方法來改變那個用於調節輸入框值的調節器樣式。值得注意的是，Safari中該調節器是位於輸入框外的。

屬性 備註
height 1.Opera上的數字調節器被放大了，這會導致輸入框的內容被隱藏。
padding 同上
font 參見line-height的備註
background 1.雖然被支援，但在不同瀏覽器間表現很不一致
border-radius 同上
box-shadow 同上

單選框和核取方塊

屬性 備註
width 1.某些瀏覽器會新增額外的外邊距，而另一些則會伸展該元件
height 同上

選擇框(單行)

屬性 備註
width 該屬性可被由於<select>元素，但卻不能用於<option>或<optgroup>元素
padding 1.該屬性可用，但在MAC OSX上的一些瀏覽器存在不一致的表現
2.該屬性可用於<select>元素，但對於<option>和<optgroup>的處理則存在不一致
color 1.在MAC OSX上的Webkit瀏覽器不支援在原生元件上（譯註：指的應是單行選擇框這一元件）使用該屬性；而且它們和Opera都不在<option>和<optgroup>上支援該屬性
font 1.在MAC OSX上的Webkit瀏覽器不支援在原生元件上使用該屬性；而且它們和Opera都不在<option>和<optgroup>上支援該屬性
letter-spacing 1.IE9不支援在<select>, <option>, <optgroup>上使用該屬性；Mac OSX上的Webkit瀏覽器不支援在<option>, <optgroup>上使用該屬性
text-align 1.Windows7上的IE9和Webkit瀏覽器不支援在這一元件上使用該屬性
text-decoration 1.只有Firefox實現了對該屬性的完全支援，Opera根本不支援該屬性，而其他瀏覽器只支援在<select>元素上使用它
text-indent 1.多數瀏覽器只在<select>元素上支援該屬性
2.IE9不支援該屬性
text-shadow 同上
text-transform 1.多數瀏覽器只在<select>元素上支援該屬性
background 同上
border-radius 同上
box-shadow 同上

選擇框(多行)

屬性 備註
padding 1.Opera不支援在<select>使用padding-top和padding-bottom
font 參見line-height的備註
letter-spacing 1.IE9不支援在<select>, <option>, <optgroup>上使用該屬性；Mac OSX上的Webkit瀏覽器不支援在<option>, <optgroup>上使用該屬性
text-align 1.Windows7上的IE9和Webkit瀏覽器不支援在這一元件上使用該屬性
text-decoration 1.只被FireFox和IE9支援
text-transform 1.多數瀏覽器只在<select>元素上支援該屬性
border-radius 1.在Opera上只有明確設定了邊框的情況下，border-radius屬性才能使用
box-shadow 1.IE9不支援該屬性

檔案選擇器

屬性 備註
font 1.雖然被支援，但在不同瀏覽器間表現很不一致
letter-spacing 1.多數瀏覽器將該屬性用於選擇按鈕
text-indent 1.該屬性表現得像額外的左外邊距
background 1.雖然被支援，但在不同瀏覽器間表現很不一致
box-shadow 1.IE9不支援該屬性

顏色選擇器

屬性 備註
height 1.Opera採用對選擇框一樣的限制來處理該元件
padding 同上
background 1.雖然被支援，但在不同瀏覽器間表現很不一致
border-radius 同上
box-shadow 同上

度量和進度條

屬性 備註
padding 1.當在調整過的元素上使用padding屬性時，Chrome會隱藏<progress>和<meter>
background 1.雖然被支援，但在不同瀏覽器間表現很不一致
border-radius 同上
box-shadow 同上

滑塊

屬性 備註
height 1.Chrome和Opera在元件周圍新增了額外的空間，Windows7上的Opera拉伸了滑塊
padding 1.可用，但不會有視覺效果
background 1.雖然被支援，但在不同瀏覽器間表現很不一致
border-radius 同上
box-shadow 同上

影像按鈕

屬性 備註
border-radius 1.IE9不支援該屬性
box-shadow 同上

相關文章