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

vertical-align 表單元素垂直對齊的解決方法

  發(fā)布時間：2009-07-29 17:04:52   作者：佚名   我要評論
最近的項目涉及到很多表單的制作，特別是復(fù)選框(checkbox)和單選框(radio)。但是在前端開發(fā)過程中發(fā)現(xiàn)，單(復(fù))選框和它們后面的提示文字在不進行任何設(shè)置的情況下，是無法對齊的，而且在Firefox和IE中相差甚大。即使設(shè)置了vertical-align:middle，也依然不能完美對齊。

經(jīng)過以上折騰，我得出了跟wheatlee相同的結(jié)論，就是，各種瀏覽器之間對這個問題的處理貌似沒有任何規(guī)律。并且，似乎每一種瀏覽器對于 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)過仔細總結(jié)和分析，發(fā)現(xiàn)好像最終對齊的結(jié)果跟label的高度和當前字體中小寫x的中心點都有關(guān)系，兩者同時影響著渲染結(jié)果(雖然不明白為什么會這樣)。那么，既然現(xiàn)在的情況以及非常接近于希望的狀態(tài)了，是否可以通過設(shè)置字體的方式來改變小寫x的中心點的位置，進而對垂直對齊的結(jié)果進行“微調(diào)”呢？

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


提示：您可以先修改部分代碼再運行

最終效果：

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


相關(guān)文章

最新評論