主頁(yè) > 知識(shí)庫(kù) > CSS標(biāo)準(zhǔn):vertical-align屬性

CSS標(biāo)準(zhǔn):vertical-align屬性

熱門(mén)標(biāo)簽:地圖標(biāo)注沿海城市房?jī)r(jià) 通遼地圖標(biāo)注app 高德地圖標(biāo)注廁所 中國(guó)地圖標(biāo)注城市的 西安金倫外呼系統(tǒng) 江西ai電銷(xiāo)機(jī)器人如何 地圖標(biāo)注員工作內(nèi)容 威海語(yǔ)音外呼系統(tǒng)平臺(tái) 智能語(yǔ)音電銷(xiāo)機(jī)器人客戶(hù)端

原文:http://www.mikkolee.com/13
最近幾天仔細(xì)研究了一下vertical-align這個(gè)屬性,結(jié)果讓我大吃一驚,這個(gè)很“資深”的CSS標(biāo)準(zhǔn)竟然在各個(gè)瀏覽器里面的表現(xiàn)都各不相同。
vertical-align的值有點(diǎn)多,包括 baseline sub supper top text-top bottom text-bottom middle以及各種長(zhǎng)度值(%,em,ex等等)。我先給大家看一個(gè)我覺(jué)得最夸張的值:bottom。代碼如下:
p {
font-size: 18px;
line-height: 36px;
font-family: Tahoma, sans-serif;
}
img {
vertical-align: bottom ;
}

然后大家看一看這段CSS在各個(gè)瀏覽器中的效果(圖片是我故意做成那個(gè)樣子,為了可以看清楚相對(duì)位置):





呃,這個(gè)結(jié)果其實(shí)很讓人匪夷所思,一般我會(huì)認(rèn)為Firefox會(huì)比IE解釋得更正確,但是看過(guò)Opera之后發(fā)現(xiàn)它和IE是一樣的,而Safari/Win是站在Firefox那邊。說(shuō)實(shí)話(huà),我不知道這是怎么回事。
仔細(xì)學(xué)習(xí)了《CSS權(quán)威指南(第二版)》,甚至還去查閱了 W3C ,然后自己做出一個(gè)關(guān)于vertical-align的圖:

按照W3C的定義,當(dāng)內(nèi)聯(lián)元素的vertical-align設(shè)置為: baseline, top, bottom的時(shí)候,都是該元素的baseline(或middle, top, bottom)對(duì)其周?chē)氐南嗤恢?,如圖片的top和周?chē)淖值膖op對(duì)齊。 text-top和text-bottom的時(shí)候,是該元素的top(或bottom)對(duì)齊周?chē)氐膖ext-top(或text-bottom)。 長(zhǎng)度(%, em, ex)的時(shí)候,是基于baseline往上移動(dòng),所以正數(shù)往上,負(fù)數(shù)往下。 middle的時(shí)候,是該元素的中心對(duì)齊周?chē)氐闹行?。這里“中心”的定義是:圖片當(dāng)然就是height的一半的位置,而文字應(yīng)該是基于baseline往上移動(dòng)0.5ex,亦即 小寫(xiě)字母“x”的正中心 。但是很多瀏覽器往往把ex這個(gè)單位定義為0.5em,以至于其實(shí)不一定是x的正中心(以上圖為例,x的高度應(yīng)該是10px,而em是18px,所以?xún)蓚€(gè)值不一樣)。
但是,即使是按照上面的準(zhǔn)則,各個(gè)瀏覽器的解釋如此迥異也讓我匪夷所思。我也懶得去研究為什么是這樣子??偟膩?lái)說(shuō)呢,應(yīng)該就是它們對(duì)字體的每一條線(xiàn)的位置的定義都不大一樣,所以這個(gè)問(wèn)題不單跟vertical-align有關(guān),而跟瀏覽器對(duì)內(nèi)聯(lián)文本和內(nèi)聯(lián)圖片的結(jié)構(gòu)的解釋有很大關(guān)系。
最后給大家一個(gè)測(cè)試頁(yè)面,可以方面的看看各個(gè)瀏覽器對(duì)vertical-align不同值的解釋結(jié)果。
http://www.mikkolee.com/weblab/001_vertical/
大家可以測(cè)試一下其他的值,比如middle或是text-top,也是各個(gè)瀏覽器完全不一樣。有什么心得大家來(lái)討論一下吧~~

標(biāo)簽:青海 晉中 河池 眉山 阜陽(yáng) 營(yíng)口 崇左 北海

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《CSS標(biāo)準(zhǔn):vertical-align屬性》,本文關(guān)鍵詞  CSS,標(biāo)準(zhǔn),vertical-align,屬性,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《CSS標(biāo)準(zhǔn):vertical-align屬性》相關(guān)的同類(lèi)信息!
  • 本頁(yè)收集關(guān)于CSS標(biāo)準(zhǔn):vertical-align屬性的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章