久久精品2019中文字幕国语_欧美成人精品视频在线观看_台湾自拍偷区亚洲综合网_老色鬼在线精品视频在线播放

云南網(wǎng)站建設(shè)創(chuàng)新企業(yè) 昆明多彩網(wǎng)絡(luò)公司

在線qq:540105663

表單元素input、按鈕、文字完美垂直居中對齊方法

來源:昆明多彩網(wǎng)絡(luò)公司 日期:2012-02-11 閱讀: 發(fā)表評論

本文最終總結(jié)出來辦法就是要對齊的表單內(nèi)容(含文字、圖片、表單各種元素、label),完美解決表單元素input等對齊問題。

這是一個昆明做網(wǎng)站中已經(jīng)用到的技巧。

本文最終總結(jié)出來辦法就是要對齊的表單內(nèi)容(含文字、圖片、表單各種元素、label)字體設(shè)置為Tahoma,則可以完美的實現(xiàn)對齊(Verdana等字體也可以),其中個別的input元素如radio的padding和margin設(shè)置為0,即可完美解決表單元素input等對齊問題。

最近的項目涉及到很多表單的制作,特別是復(fù)選框(checkbox)和單選框(radio)。但是在前端開發(fā)過程中發(fā)現(xiàn),單(復(fù))選框和它們后面的提示文字在不進(jìn)行任何設(shè)置的情況下,是無法對齊的,而且在Firefox和IE中相差甚大。即使設(shè)置了vertical-align:middle,也依然不能完美對齊。如下圖所示:

01.jpg

于是上網(wǎng)查看了一些網(wǎng)站,發(fā)現(xiàn)這個問題是普遍存在的,如下圖(FF3.5):

error.jpg

在很多網(wǎng)站涉及到表單的頁面中,都存在這種表單元素與提示文字無法對齊的問題。于是打算研究一下這個問題。首先,搜索到了wheatlee前輩的文章《大家都對vertical-align的各說各話》。wheatlee在他的文章中關(guān)于垂直居中提到了這樣幾個關(guān)鍵點:

1、vertical-align:middle的時候,是該元素的中心對齊周圍元素的中心。

2、這里“中心”的定義是:圖片當(dāng)然就是height的一半的位置,而文字應(yīng)該是基于baseline往上移動0.5ex,亦即小寫字母“x”的正中心。但是很多瀏覽器往往把ex這個單位定義為0.5em,以至于其實不一定是x的正中心

(baseline等名詞如果不懂,請先閱讀wheatlee的文章)

按照這個思路,對照我遇到的問題,首先想到的是先驗證一下瀏覽器對于“復(fù)選框”和圖片是不是使用同樣的規(guī)則來渲染(是不是把復(fù)選框當(dāng)成一個正方形圖片來對待)。于是寫出下面的代碼:


<style>
body{font-size:12px;}
</style>
<input style="vertical-align:middle;" name="test" type="checkbox">
<img style="vertical-align:middle;"  src="testpic.gif" />
測試文字

代碼中的testpic.gif是一個尺寸與復(fù)選框完全一樣的黑色圖片。FF3.5下顯示如下:
02.jpg
事實證明,F(xiàn)F3.5對于復(fù)選框和圖片的垂直對齊方式是采用同樣的規(guī)則進(jìn)行渲染的,即將復(fù)選框當(dāng)作一個正方形的圖片(IE不是)。按照wheatlee“middle的時候,是該元素的中心對齊周圍元素的中心”的觀點,如果我在復(fù)選框后面輸入英文字符,那么復(fù)選框的中心將與英文中小寫字母x的中心對齊。經(jīng)測試,F(xiàn)F3.5下面基本上是這樣的(在一些字號的時候會有一定的誤差,比如,如果字體高度是偶數(shù),那么這個中心點有時在一般偏上1px,有時在一半偏下1px)。如圖:
03.jpg
但是這對于中文來說,并不是一個好的結(jié)果。因為中文是方塊字,并且相同字號的情況下,高度會比小寫的x高出很多。所以,按照瀏覽器內(nèi)置的方式,只用 vertical-align:middle是無論如何也無法對齊中文的(無論是只寫中文,中文在前,英文在前,F(xiàn)F3.5都是按照小寫x中心那種方法來對齊的)。但是回頭再看看wheatlee的文章,他說這個小寫x中心對齊的渲染方式,是對于“文字”來說的。那么,如果不是文字呢…?如果復(fù)選框后面跟的是一個行內(nèi)元素,如label,而文字是寫在它內(nèi)部的,會是什么樣呢?瀏覽器會不會將這個內(nèi)聯(lián)元素整體看作一個“塊”,然后依照類似圖片的規(guī)則進(jìn)行渲染呢?如果那樣,我們就達(dá)到目的了。


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

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

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

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

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


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

08.jpg

于是,嘗試去掉radio的外邊距,刷新后顯示正常。(其實多選框checkbox也是有外邊距的,只是它的外邊距四個方向都有,并且相等,所以對于垂直對齊沒有影響。)下圖是一些常用表單元素的最終顯示效果以及最終代碼,大家可以用不同瀏覽器看一下實際的效果(注:由于演示使用的12px的中文實際只有11px高,而 IE下文本框等元素的高度是22px,一個是奇數(shù),一個是偶數(shù),所以這些部分在IE中是無論如何也對不齊的,差1px。如果手動控制文本框高度為奇數(shù),或者將文字設(shè)置成為偶數(shù)的高度,則顯示正常):

09.jpg

 

發(fā)表評論評論列表(有 條評論)