摘要:系列文章说明原文下面的兼容性表将总结出表单对的支持程度,由于和表单的复杂性,这几个表不能认为是最佳的参考对象。该属性不能生效,或者表现很不一致以至于不可靠。在表单组件上,不支持该属性。按钮属性备注该属性不会在上的浏览器上生效。
系列文章说明
原文
下面的兼容性表将总结出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浏览器会给的边框和字体都使用color属性。 |
font | 参见line-height的备注 |
text-decoration | 参见Opera的备注 |
text-indent | 1.IE9只在上支持该属性,而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 | 该属性可被由于元素,但却不能用于或元素 |
padding | 1.该属性可用,但在MAC OSX上的一些浏览器存在不一致的表现 2.该属性可用于元素,但对于和的处理则存在不一致 |
color | 1.在MAC OSX上的Webkit浏览器不支持在原生组件上(译注:指的应是单行选择框这一组件)使用该属性;而且它们和Opera都不在和上支持该属性 |
font | 1.在MAC OSX上的Webkit浏览器不支持在原生组件上使用该属性;而且它们和Opera都不在和上支持该属性 |
letter-spacing | 1.IE9不支持在, , 上使用该属性;Mac OSX上的Webkit浏览器不支持在, 上使用该属性 |
text-align | 1.Windows7上的IE9和Webkit浏览器不支持在这一组件上使用该属性 |
text-decoration | 1.只有Firefox实现了对该属性的完全支持,Opera根本不支持该属性,而其他浏览器只支持在元素上使用它 |
text-indent | 1.多数浏览器只在元素上支持该属性 2.IE9不支持该属性 |
text-shadow | 同上 |
text-transform | 1.多数浏览器只在元素上支持该属性 |
background | 同上 |
border-radius | 同上 |
box-shadow | 同上 |
属性 | 备注 |
---|---|
padding | 1.Opera不支持在使用padding-top和padding-bottom |
font | 参见line-height的备注 |
letter-spacing | 1.IE9不支持在, , 上使用该属性;Mac OSX上的Webkit浏览器不支持在, 上使用该属性 |
text-align | 1.Windows7上的IE9和Webkit浏览器不支持在这一组件上使用该属性 |
text-decoration | 1.只被FireFox和IE9支持 |
text-transform | 1.多数浏览器只在元素上支持该属性 |
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会隐藏和 |
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 | 同上 |
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/49988.html
摘要:系列文章说明原文下面的兼容性表将总结出表单对的支持程度,由于和表单的复杂性,这几个表不能认为是最佳的参考对象。该属性不能生效,或者表现很不一致以至于不可靠。在表单组件上,不支持该属性。按钮属性备注该属性不会在上的浏览器上生效。 系列文章说明 原文 下面的兼容性表将总结出HTML表单对CSS的支持程度,由于CSS和HTML表单的复杂性,这几个表不能认为是最佳的参考对象。尽管如此,它们...
摘要:示例多选框和单选框给多选框和单选框添加样式是很让人凌乱的。通向漂亮表单之路一些有用的库和拓展工具尽管在复选框和单选框上的表现力已经够用了,但离其支持高级表单组件仍然遥遥无期。其表单部分挺有用的。 系列文章说明 原文 在本文中,我们将了解如何在HTML表单上使用CSS,为那些难于自定义的表单组件加以样式。如前文所述,文本框和按钮很适合使用CSS,而现在我们得来探索HTML表单样式的那...
摘要:示例多选框和单选框给多选框和单选框添加样式是很让人凌乱的。通向漂亮表单之路一些有用的库和拓展工具尽管在复选框和单选框上的表现力已经够用了,但离其支持高级表单组件仍然遥遥无期。其表单部分挺有用的。 系列文章说明 原文 在本文中,我们将了解如何在HTML表单上使用CSS,为那些难于自定义的表单组件加以样式。如前文所述,文本框和按钮很适合使用CSS,而现在我们得来探索HTML表单样式的那...
摘要:并非所有组件受的影响都是平等的如今在表单使用时依然有一些困难这些问题可归为三类还好的若存在跨平台问题,一些元素可以只添加少许的样式,有如下几个结构元素此外,还有所有的文本框组件单行或多行,以及按钮。 系列文章说明 原文 本文中,我们将学习如何使用CSS来让HTML表单看起来更漂亮,这可能需要窍门才能做到。由于历史及技术上的原因,表单组件并不太适合使用CSS;而也正因为有这些困难,许...
阅读 1793·2021-11-18 10:02
阅读 3524·2021-11-16 11:45
阅读 1785·2021-09-10 10:51
阅读 2105·2019-08-30 15:43
阅读 1372·2019-08-30 11:23
阅读 1484·2019-08-29 11:07
阅读 1891·2019-08-23 17:05
阅读 1392·2019-08-23 16:14