【譯】表單組件的屬性兼容性表

• 系列文章說明

• 原文

下面的兼容性表將總結出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	同上