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

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

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

事實(shí)證明，F(xiàn)F3.5對于復(fù)選框和圖片的垂直對齊方式是采用同樣的規(guī)則進(jìn)行渲染的，即將復(fù)選框當(dāng)作一個(gè)正方形的圖片(IE不是)。按照wheatlee“middle的時(shí)候，是該元素的中心對齊周圍元素的中心”的觀點(diǎn)，如果我在復(fù)選框后面輸入英文字符，那么復(fù)選框的中心將與英文中小寫字母x的中心對齊。經(jīng)測試，F(xiàn)F3.5下面基本上是這樣的(在一些字號的時(shí)候會有一定的誤差，比如，如果字體高度是偶數(shù)，那么這個(gè)中心點(diǎn)有時(shí)在一般偏上1px，有時(shí)在一半偏下1px)。如圖：

但是這對于中文來說，并不是一個(gè)好的結(jié)果。因?yàn)橹形氖欠綁K字，并且相同字號的情況下，高度會比小寫的x高出很多。所以，按照瀏覽器內(nèi)置的方式，只用 vertical-align:middle是無論如何也無法對齊中文的（無論是只寫中文，中文在前，英文在前，F(xiàn)F3.5都是按照小寫x中心那種方法來對齊的）。但是回頭再看看wheatlee的文章，他說這個(gè)小寫x中心對齊的渲染方式，是對于“文字”來說的。那么，如果不是文字呢…？如果復(fù)選框后面跟的是一個(gè)行內(nèi)元素，如label，而文字是寫在它內(nèi)部的，會是什么樣呢？瀏覽器會不會將這個(gè)內(nèi)聯(lián)元素整體看作一個(gè)“塊”，然后依照類似圖片的規(guī)則進(jìn)行渲染呢？如果那樣，我們就達(dá)到目的了。

但是經(jīng)過測試，很遺憾，事實(shí)并不是這樣，加上label后跟沒加沒有任何區(qū)別。FF3.5/IE6/IE7均是如此。在FF3.5中用firebug看一下，證明瀏覽器并沒有按照label的高度值來去對齊中心點(diǎn)。如圖：

如果按照之前的設(shè)想，紅藍(lán)兩線應(yīng)該是重合的。但現(xiàn)在的情況是，它們相差了1px。并且這1px是沒有規(guī)律的，隨著字號的放大，并不恒定，貌似輕易也無法提煉出對應(yīng)關(guān)系來。于是想到，再試一下將label也加上vertical-align:middle。結(jié)果如圖：

在FF3.5和IE7下面已經(jīng)很接近于我們希望的狀態(tài)了，只差1px。IE6下… 無語了。

相關(guān)文章

最新評論