摘要:系列文章說明原文下面的兼容性表將總結出表單對的支持程度,由于和表單的復雜性,這幾個表不能認為是最佳的參考對象。該屬性不能生效,或者表現很不一致以至于不可靠。在表單組件上,不支持該屬性。按鈕屬性備注該屬性不會在上的瀏覽器上生效。
系列文章說明
原文
下面的兼容性表將總結出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 | 同上 |
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/111442.html
摘要:系列文章說明原文下面的兼容性表將總結出表單對的支持程度,由于和表單的復雜性,這幾個表不能認為是最佳的參考對象。該屬性不能生效,或者表現很不一致以至于不可靠。在表單組件上,不支持該屬性。按鈕屬性備注該屬性不會在上的瀏覽器上生效。 系列文章說明 原文 下面的兼容性表將總結出HTML表單對CSS的支持程度,由于CSS和HTML表單的復雜性,這幾個表不能認為是最佳的參考對象。盡管如此,它們...
摘要:示例多選框和單選框給多選框和單選框添加樣式是很讓人凌亂的。通向漂亮表單之路一些有用的庫和拓展工具盡管在復選框和單選框上的表現力已經夠用了,但離其支持高級表單組件仍然遙遙無期。其表單部分挺有用的。 系列文章說明 原文 在本文中,我們將了解如何在HTML表單上使用CSS,為那些難于自定義的表單組件加以樣式。如前文所述,文本框和按鈕很適合使用CSS,而現在我們得來探索HTML表單樣式的那...
摘要:示例多選框和單選框給多選框和單選框添加樣式是很讓人凌亂的。通向漂亮表單之路一些有用的庫和拓展工具盡管在復選框和單選框上的表現力已經夠用了,但離其支持高級表單組件仍然遙遙無期。其表單部分挺有用的。 系列文章說明 原文 在本文中,我們將了解如何在HTML表單上使用CSS,為那些難于自定義的表單組件加以樣式。如前文所述,文本框和按鈕很適合使用CSS,而現在我們得來探索HTML表單樣式的那...
摘要:并非所有組件受的影響都是平等的如今在表單使用時依然有一些困難這些問題可歸為三類還好的若存在跨平臺問題,一些元素可以只添加少許的樣式,有如下幾個結構元素此外,還有所有的文本框組件單行或多行,以及按鈕。 系列文章說明 原文 本文中,我們將學習如何使用CSS來讓HTML表單看起來更漂亮,這可能需要竅門才能做到。由于歷史及技術上的原因,表單組件并不太適合使用CSS;而也正因為有這些困難,許...
閱讀 472·2021-11-22 12:05
閱讀 1531·2021-11-17 09:33
閱讀 3579·2021-11-11 16:54
閱讀 2659·2021-10-14 09:49
閱讀 4023·2021-09-06 15:01
閱讀 1821·2019-08-29 17:23
閱讀 693·2019-08-29 14:09
閱讀 712·2019-08-29 12:28