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

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

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

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

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

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

1、vertical-align:middle的時(shí)候,是該元素的中心對(duì)齊周圍元素的中心。

2、這里“中心”的定義是:圖片當(dāng)然就是height的一半的位置,而文字應(yīng)該是基于baseline往上移動(dòng)0.5ex,亦即小寫字母“x”的正中心。但是很多瀏覽器往往把ex這個(gè)單位定義為0.5em,以至于其實(shí)不一定是x的正中心(baseline等名詞如果不懂,請(qǐng)先閱讀wheatlee的文章)

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

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

代碼中的testpic.gif是一個(gè)尺寸與復(fù)選框完全一樣的黑色圖片。FF3.5下顯示如下:


相關(guān)文章

最新評(píng)論