摘要:系列文章說明原文下面的兼容性表將總結(jié)出表單對(duì)的支持程度,由于和表單的復(fù)雜性,這幾個(gè)表不能認(rèn)為是最佳的參考對(duì)象。該屬性不能生效,或者表現(xiàn)很不一致以至于不可靠。在表單組件上,不支持該屬性。按鈕屬性備注該屬性不會(huì)在上的瀏覽器上生效。
系列文章說明
原文
下面的兼容性表將總結(jié)出HTML表單對(duì)CSS的支持程度,由于CSS和HTML表單的復(fù)雜性,這幾個(gè)表不能認(rèn)為是最佳的參考對(duì)象。盡管如此,它們也能讓你更了解能做什么、不能做什么,這將有助于你學(xué)習(xí)如何開發(fā)。
如何閱讀這些表格 值各個(gè)屬性都有如下四個(gè)可能的值:
YES
具有可靠而一致的跨瀏覽器支持。但你可能還得在某些邊際情況下面對(duì)一些奇怪的副作用。
PARTIAL
當(dāng)該屬性生效時(shí),你可能會(huì)頻繁遇見那些奇怪的副作用或者不一致性。最好避免使用這些屬性,除非你能掌控這些副作用。
NO
該屬性不能生效,或者表現(xiàn)很不一致以至于不可靠。
N.A
該屬性對(duì)于這類組件來說沒有什么意義。
每種屬性都有兩種可能的效果:
N(Normal)
指該屬性被直接應(yīng)用。
T(Tweaked)
指該屬性和下列額外規(guī)則一起使用:
* { /* 在Webkit瀏覽器下禁用原生的外觀和效果 */ -webkit-appearance: none; /* 在Gecko瀏覽器下禁用原生的外觀和效果 */ -moz-appearance: none; /* 在幾個(gè)不同的瀏覽器下禁用原生的外觀和效果,包括Opera,Internet Explorer和Firefox */ background: none; }兼容性表 統(tǒng)一行為
在整體水平上,一些行為對(duì)于多數(shù)瀏覽器來說是一致的:
border, background, border-radius, height
在一些瀏覽器上,使用這些屬性可以部分或者完全禁止組件的原生外觀和體驗(yàn)。所以使用時(shí)請(qǐng)小心。
line-height
該屬性的跨瀏覽器支持很不一致,得避免使用它。
text-decoration
在表單組件上,Opera不支持該屬性。
text-overflow
在表單組件上,Opera,safari 和 IE9不支持該屬性。
text-shadow
在表單組件上Opera不支持該屬性,而IE9干脆就完全不支持它。
文本框譯注:由于表格內(nèi)容比較復(fù)雜、使用markdown難以表現(xiàn)原有格式,而且考慮到這些表格更多只是讓我們做個(gè)參考、閱讀難度也不是很大。所以下文將只會(huì)摘取兼容性表中一些屬性的說明作翻譯,完整表格請(qǐng)參照原文。^_^
屬性 | 備注 |
---|---|
height | 1.Webkit瀏覽器(多數(shù)指Mac OSX和iOS上的)對(duì)搜索框使用了原生的外觀和效果。所以得使用-webkit-appearance:none來讓搜索框能使用該屬性。 2.在Windows7上,IE9不會(huì)應(yīng)用到邊框,除非使用了background:none。 |
border | 同上 |
padding | 同上 |
color | 1.若未設(shè)置border-color屬性,某些Webkit瀏覽器會(huì)給的邊框和字體都使用color屬性。 |
font | 參見line-height的備注 |
text-decoration | 參見Opera的備注 |
text-indent | 1.IE9只在上支持該屬性,而Opera只在單行文本框上支持它。 |
background | 同height |
border-radius | 1.同height。 2.Opera上的border-radius屬性只在明確設(shè)置了邊框后才生效。 |
box-shadow | 1.IE9不支持該屬性。 |
屬性 | 備注 |
---|---|
height | 1.該屬性不會(huì)在Mac OSX上的Webkit瀏覽器上生效。 |
padding | 同上 |
font | 參見line-height的備注 |
border-radius | 1.Opera上的border-radius屬性只在明確設(shè)置了邊框后才生效。 |
box-shadow | 1.IE9不支持該屬性。 |
在實(shí)現(xiàn)了number組件的瀏覽器上,沒有統(tǒng)一的方法來改變那個(gè)用于調(diào)節(jié)輸入框值的調(diào)節(jié)器樣式。值得注意的是,Safari中該調(diào)節(jié)器是位于輸入框外的。
屬性 | 備注 |
---|---|
height | 1.Opera上的數(shù)字調(diào)節(jié)器被放大了,這會(huì)導(dǎo)致輸入框的內(nèi)容被隱藏。 |
padding | 同上 |
font | 參見line-height的備注 |
background | 1.雖然被支持,但在不同瀏覽器間表現(xiàn)很不一致 |
border-radius | 同上 |
box-shadow | 同上 |
屬性 | 備注 |
---|---|
width | 1.某些瀏覽器會(huì)添加額外的外邊距,而另一些則會(huì)伸展該組件 |
height | 同上 |
屬性 | 備注 |
---|---|
width | 該屬性可被由于元素,但卻不能用于或元素 |
padding | 1.該屬性可用,但在MAC OSX上的一些瀏覽器存在不一致的表現(xiàn) 2.該屬性可用于元素,但對(duì)于和的處理則存在不一致 |
color | 1.在MAC OSX上的Webkit瀏覽器不支持在原生組件上(譯注:指的應(yīng)是單行選擇框這一組件)使用該屬性;而且它們和Opera都不在和上支持該屬性 |
font | 1.在MAC OSX上的Webkit瀏覽器不支持在原生組件上使用該屬性;而且它們和Opera都不在和上支持該屬性 |
letter-spacing | 1.IE9不支持在, , 上使用該屬性;Mac OSX上的Webkit瀏覽器不支持在, 上使用該屬性 |
text-align | 1.Windows7上的IE9和Webkit瀏覽器不支持在這一組件上使用該屬性 |
text-decoration | 1.只有Firefox實(shí)現(xiàn)了對(duì)該屬性的完全支持,Opera根本不支持該屬性,而其他瀏覽器只支持在元素上使用它 |
text-indent | 1.多數(shù)瀏覽器只在元素上支持該屬性 2.IE9不支持該屬性 |
text-shadow | 同上 |
text-transform | 1.多數(shù)瀏覽器只在元素上支持該屬性 |
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.多數(shù)瀏覽器只在元素上支持該屬性 |
border-radius | 1.在Opera上只有明確設(shè)置了邊框的情況下,border-radius屬性才能使用 |
box-shadow | 1.IE9不支持該屬性 |
屬性 | 備注 |
---|---|
font | 1.雖然被支持,但在不同瀏覽器間表現(xiàn)很不一致 |
letter-spacing | 1.多數(shù)瀏覽器將該屬性用于選擇按鈕 |
text-indent | 1.該屬性表現(xiàn)得像額外的左外邊距 |
background | 1.雖然被支持,但在不同瀏覽器間表現(xiàn)很不一致 |
box-shadow | 1.IE9不支持該屬性 |
屬性 | 備注 |
---|---|
height | 1.Opera采用對(duì)選擇框一樣的限制來處理該組件 |
padding | 同上 |
background | 1.雖然被支持,但在不同瀏覽器間表現(xiàn)很不一致 |
border-radius | 同上 |
box-shadow | 同上 |
屬性 | 備注 |
---|---|
padding | 1.當(dāng)在調(diào)整過的元素上使用padding屬性時(shí),Chrome會(huì)隱藏和 |
background | 1.雖然被支持,但在不同瀏覽器間表現(xiàn)很不一致 |
border-radius | 同上 |
box-shadow | 同上 |
屬性 | 備注 |
---|---|
height | 1.Chrome和Opera在組件周圍添加了額外的空間,Windows7上的Opera拉伸了滑塊 |
padding | 1.可用,但不會(huì)有視覺效果 |
background | 1.雖然被支持,但在不同瀏覽器間表現(xiàn)很不一致 |
border-radius | 同上 |
box-shadow | 同上 |
屬性 | 備注 |
---|---|
border-radius | 1.IE9不支持該屬性 |
box-shadow | 同上 |
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/111442.html
摘要:系列文章說明原文下面的兼容性表將總結(jié)出表單對(duì)的支持程度,由于和表單的復(fù)雜性,這幾個(gè)表不能認(rèn)為是最佳的參考對(duì)象。該屬性不能生效,或者表現(xiàn)很不一致以至于不可靠。在表單組件上,不支持該屬性。按鈕屬性備注該屬性不會(huì)在上的瀏覽器上生效。 系列文章說明 原文 下面的兼容性表將總結(jié)出HTML表單對(duì)CSS的支持程度,由于CSS和HTML表單的復(fù)雜性,這幾個(gè)表不能認(rèn)為是最佳的參考對(duì)象。盡管如此,它們...
摘要:示例多選框和單選框給多選框和單選框添加樣式是很讓人凌亂的。通向漂亮表單之路一些有用的庫和拓展工具盡管在復(fù)選框和單選框上的表現(xiàn)力已經(jīng)夠用了,但離其支持高級(jí)表單組件仍然遙遙無期。其表單部分挺有用的。 系列文章說明 原文 在本文中,我們將了解如何在HTML表單上使用CSS,為那些難于自定義的表單組件加以樣式。如前文所述,文本框和按鈕很適合使用CSS,而現(xiàn)在我們得來探索HTML表單樣式的那...
摘要:示例多選框和單選框給多選框和單選框添加樣式是很讓人凌亂的。通向漂亮表單之路一些有用的庫和拓展工具盡管在復(fù)選框和單選框上的表現(xiàn)力已經(jīng)夠用了,但離其支持高級(jí)表單組件仍然遙遙無期。其表單部分挺有用的。 系列文章說明 原文 在本文中,我們將了解如何在HTML表單上使用CSS,為那些難于自定義的表單組件加以樣式。如前文所述,文本框和按鈕很適合使用CSS,而現(xiàn)在我們得來探索HTML表單樣式的那...
摘要:并非所有組件受的影響都是平等的如今在表單使用時(shí)依然有一些困難這些問題可歸為三類還好的若存在跨平臺(tái)問題,一些元素可以只添加少許的樣式,有如下幾個(gè)結(jié)構(gòu)元素此外,還有所有的文本框組件單行或多行,以及按鈕。 系列文章說明 原文 本文中,我們將學(xué)習(xí)如何使用CSS來讓HTML表單看起來更漂亮,這可能需要竅門才能做到。由于歷史及技術(shù)上的原因,表單組件并不太適合使用CSS;而也正因?yàn)橛羞@些困難,許...
閱讀 487·2021-11-22 12:05
閱讀 1547·2021-11-17 09:33
閱讀 3594·2021-11-11 16:54
閱讀 2687·2021-10-14 09:49
閱讀 4069·2021-09-06 15:01
閱讀 1837·2019-08-29 17:23
閱讀 711·2019-08-29 14:09
閱讀 730·2019-08-29 12:28