2011年9月7日 1:26 am -
代碼淺談 -
css最近接觸了許多 關(guān)于圖片文字水平對(duì)齊的需求，然后發(fā)現(xiàn)如果單單將vertical-align 設(shè)置為middle 的話，不同瀏覽器下居中對(duì)齊的位置有偏移，讓人好不蛋疼~ =，=
網(wǎng)上搜了下好像也沒(méi)有搜到相關(guān)的分析，大部分都是垂直居中的案例
于是專(zhuān)門(mén)針對(duì)vertical-align 做了次分析，功夫不負(fù)有心人，分析結(jié)果還是挺好玩的，對(duì)vertical-align 又有了一次深入的了解。給力~~~
demo 傳送門(mén)：
vertical-align 各屬性分析 有錯(cuò)誤歡迎回復(fù)糾正哦 ^__^
一些心得體會(huì)：
vertical-align 定義
最初我認(rèn)為的vertical-align 解釋 跟text-align 一樣，是容器內(nèi)部的非block 元素居中對(duì)齊，但~~ 我理解錯(cuò)了
從w3c 官方對(duì) vertical-align 各屬性的解釋來(lái)看，vertical-align 是定義當(dāng)前節(jié)點(diǎn)，跟外圍內(nèi)容的對(duì)齊方式，跟text-align 的解釋是不一樣的。
vertical-align:baseline 基線對(duì)齊
分析所得，發(fā)現(xiàn)baseline不是在中文字的可見(jiàn)部分最下方，而是在英文字的可見(jiàn)部分最下方。
然后發(fā)現(xiàn)圖片對(duì)齊的時(shí)候是以圖片的最下方同相鄰文字的 baseline 對(duì)齊。一直覺(jué)得為啥圖片下方會(huì)有4像素的空白，現(xiàn)在明白了
不同字體會(huì)有不同效果
我這個(gè)demo 用的Tahoma 字體，發(fā)現(xiàn)如果使用類(lèi)似 Yahei 等中文字體，在IE低版本下會(huì)有出現(xiàn)一些奇怪的現(xiàn)象，詳細(xì)可以看demo。
vertical-align 最好不要混用
從定義來(lái)理解，就發(fā)現(xiàn)這個(gè)vertical-align 最好不要混用。因?yàn)楸旧聿煌瑢傩詴?huì)產(chǎn)生各種各樣的兼容問(wèn)題，如果混用，估計(jì)會(huì)出現(xiàn)更復(fù)雜的現(xiàn)象。雖然我也沒(méi)有深入研究，但我覺(jué)得混用不太靠譜。
vertical-align: px 定位最穩(wěn)定
這個(gè)屬性一直都沒(méi)怎么用，原先一直用middle 來(lái)實(shí)現(xiàn)水平對(duì)齊，在一次偶爾的項(xiàng)目代碼里發(fā)現(xiàn)的。
相對(duì)定位是相對(duì)于baseline的偏差定位，負(fù)值代表圖片相對(duì)baseline往下移。
在研究中發(fā)現(xiàn)使用相對(duì)定位兼容性最好，只有IE7會(huì)有2px的偏差，但基本可以無(wú)視，因?yàn)槟壳癐E7的用戶(hù)可以忽略不計(jì)。
不過(guò)這種方法也不是萬(wàn)能的，
因?yàn)槭窍鄬?duì)于baseline的相對(duì)定位，如果文字變大后，圖片的對(duì)齊位置 看起來(lái)就不會(huì)跟著移動(dòng)區(qū)別于middle屬性，不過(guò)個(gè)人覺(jué)得這樣的情況出現(xiàn)概率不大，并且字大了再針對(duì)調(diào)整也沒(méi)問(wèn)題。
另外圖片大小不一樣大相應(yīng)的負(fù)值也不相同，詳細(xì)見(jiàn)demo。
高潮：vertical-align 最佳兼容方案
前面說(shuō)了這次研究沒(méi)有白費(fèi)，個(gè)人推薦的vertical-align 用法如下：
1. 盡量保持主內(nèi)容的 vertical-align 是baseline 即默認(rèn)的，不要把vertical-align 當(dāng)text-align 來(lái)理解使用。
2. 針對(duì) 內(nèi)部需要調(diào)整位置的 圖片等 進(jìn)行 px 定位。
優(yōu)點(diǎn)：保證外圍的vertical-align 是默認(rèn)值，不產(chǎn)生混用現(xiàn)象。
缺點(diǎn)：針對(duì)不同尺寸的圖片要針對(duì)進(jìn)行定位，不過(guò)一般ico 大小差不多大，可以統(tǒng)一調(diào)整。
下一步研究方向：表單元素的vertical-align: px 是否同樣適用 ？
該文章已經(jīng)被摸了402次。 共有 11 條評(píng)論
1.
小豪 2011年9月7日 at 19:20
?對(duì)，同樣適用
回復(fù)2.
mice 2011年9月9日 at 11:54
?目前IE7 版本用戶(hù)很少可無(wú)視
—————————————-
但個(gè)人覺(jué)得用ie7模式渲染的人不在少數(shù)..
當(dāng)用第三方瀏覽器(如遨游,世界之窗,綠色瀏覽器,搜狗瀏覽器[不過(guò)搜狗瀏覽器里面可以設(shè)置使用IE8渲染]等等),但使用的是IE8內(nèi)核的時(shí)候,就會(huì)用IE7模式渲染(又貌似是IE8兼容模式,沒(méi)具體研究o(︶︿︶)o)..
回復(fù)飛魚(yú) Reply:
September 9th, 2011 at 12:08
對(duì)，的確第三方瀏覽器 會(huì)有不同的效果，這次研究沒(méi)有 測(cè)過(guò) 第三方瀏覽器，有空遍歷一下第三方瀏覽器，看看效果如何
回復(fù)3.
馬啃菠籮 2011年9月11日 at 18:59
?圖是蒙的 我眼花了？
回復(fù)飛魚(yú) Reply:
September 11th, 2011 at 22:10
a haha~~
回復(fù)4.
Glow 2011年10月6日 at 17:57
?有的時(shí)候，font-family屬性也會(huì)對(duì)文字行高產(chǎn)生影響，請(qǐng)博主抽空看下這個(gè)帖子http://bbs.blueidea.com/thread-3023326-1-1.html
回復(fù)飛魚(yú) Reply:
October 9th, 2011 at 12:18
嗯 這個(gè)我也發(fā)現(xiàn)了，demo 里有說(shuō)明，不過(guò)沒(méi)有仔細(xì)研究過(guò)。
回復(fù)5.
一絲冰涼 2011年10月12日 at 18:28
?對(duì)于表單元素同樣適用，tahoma字體是關(guān)鍵，在12px下 vertical-align:-2px是比較好的解決方案，有興趣可以看看我在藍(lán)色理想發(fā)的帖子：表單元素與文字的垂直居中（一絲冰涼 用戶(hù)體驗(yàn) 愛(ài)好者）
回復(fù)飛魚(yú) Reply:
October 12th, 2011 at 23:48
嗯 ，不過(guò)我最近也發(fā)現(xiàn) 也會(huì)有一些詭異的結(jié)構(gòu)，破壞這樣的結(jié)論，具體還在研究鐘。 ^__^
回復(fù)6.
Jace 2011年10月18日 at 9:59
?文字和圖標(biāo)都vertical-align:middle;
各瀏覽器下都可以免測(cè)
回復(fù)7.
呆呆 2011年11月2日 at 18:02
?話說(shuō)最近也一直在研究這個(gè)……經(jīng)常遇到這種情況：
你好你好嗎 然后外面一層p可能還會(huì)有高度和行高，最后就導(dǎo)致要讓不同游覽器顯示一樣變得很蛋疼……
我一般都是用vertical-align的px來(lái)解決……本來(lái)想寄望于css 3的，不過(guò)貌似還是沒(méi)找到……
回復(fù)
