【译】表单组件的属性兼容性表

• 系列文章说明

• 原文

下面的兼容性表将总结出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	同上