欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

表單元素與提示文字無法對(duì)齊的問題

  發(fā)布時(shí)間:2009-07-27 21:44:01   作者:佚名   我要評(píng)論
在很多網(wǎng)站涉及到表單的頁(yè)面中,都存在這種表單元素與提示文字無法對(duì)齊的問題。于是打算研究一下這個(gè)問題。

經(jīng)過以上折騰,我得出了跟wheatlee相同的結(jié)論,就是,各種瀏覽器之間對(duì)這個(gè)問題的處理貌似沒有任何規(guī)律。并且,似乎每一種瀏覽器對(duì)于 vertical-align:middle的渲染都不是完全遵從W3C所說的“Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.”

但是經(jīng)過仔細(xì)總結(jié)和分析,發(fā)現(xiàn)好像最終對(duì)齊的結(jié)果跟label的高度和當(dāng)前字體中小寫x的中心點(diǎn)都有關(guān)系,兩者同時(shí)影響著渲染結(jié)果(雖然不明白為什么會(huì)這樣)。那么,既然現(xiàn)在的情況以及非常接近于希望的狀態(tài)了,是否可以通過設(shè)置字體的方式來改變小寫x的中心點(diǎn)的位置,進(jìn)而對(duì)垂直對(duì)齊的結(jié)果進(jìn)行“微調(diào)”呢?

最終,在不斷的測(cè)試中發(fā)現(xiàn),如果將font-family中的第一個(gè)字體設(shè)置為Tahoma,則可以完美的實(shí)現(xiàn)對(duì)齊(Verdana等字體也可以)。而且在FF3.5/IE6/IE7/IE8和Chrome中均顯示正常。最終代碼如下:

提示:您可以先修改部分代碼再運(yùn)行

最終效果:

至此,多選框(checkbox)和提示文字對(duì)齊的問題已經(jīng)解決,那么其他表單元素呢?試驗(yàn)了一下單選框(radio),發(fā)現(xiàn),還是有問題。提示文字依然是偏上。用firebug看了一下,發(fā)現(xiàn)radio元素默認(rèn)有5px的左邊距和3px的上、右邊距,卻沒有下邊距。如圖:


相關(guān)文章

最新評(píng)論