表單元素與提示文字無法對(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)文章
- 為了使表單元素和文字都垂直居中對(duì)齊,當(dāng)文本框和下拉框都沒問題,但是單選框和復(fù)選框就了,經(jīng)過反復(fù)測(cè)試終于完整搞定與大家分享,感興趣的各位可不要錯(cuò)過了哈2013-03-21
checkbox與文字混排無法對(duì)齊導(dǎo)致不美觀的解決方法
checkbox與文字不對(duì)齊會(huì)影響美觀本文將將介紹解決方法:需要checkbox居中對(duì)其 然后文字也要居中對(duì)齊,checkbox在FF和IE下表現(xiàn)不一樣;不管你怎么設(shè)置默認(rèn)的margin和padding2013-01-21HTML教程:圖片大小對(duì)齊間隔邊框?qū)傩孕薷姆椒ń榻B
修改圖片大小對(duì)齊間隔邊框?qū)傩?這些操作在開發(fā)過程中很常見,也很實(shí)用,本文對(duì)此進(jìn)行詳細(xì)介紹下,感興趣的朋友可以了解下啊2013-01-20css 垂直對(duì)齊 css中vertical-align屬性(垂直對(duì)齊)的使用說明
這兩天寫個(gè)頁(yè)面css的時(shí)候用到了vertical-align屬性,使用過程中踩到了坑,因此整理了一些,以備不時(shí)之需,感興趣的朋友可以了解下哦2013-01-09div中加入span右對(duì)齊后出現(xiàn)換行顯示兩種解決思路
div中加入span右對(duì)齊后,出現(xiàn)了換行問題,一般思路的話一定是認(rèn)為通過分開兩列,一個(gè)align=left,另一個(gè)align=right;很是疑惑,于是利用閑暇時(shí)間,搜索整理下,曬出來 2012-12-19 css span右對(duì)齊 css li標(biāo)簽中span日期靠右布局實(shí)現(xiàn)代碼
在網(wǎng)頁(yè)布局中經(jīng)常會(huì)碰到新聞標(biāo)題靠左日期靠右,想要實(shí)現(xiàn)這種布局效果,需要在代碼上下點(diǎn)功夫,本人比較上心,也遇到此問題,于是搜集整理一下,需要的朋友可以參考下2012-12-18怎樣對(duì)齊文本框和圖像(image)按鈕實(shí)現(xiàn)三點(diǎn)一線
一個(gè)文本框旁邊一個(gè)按鈕是很經(jīng)常用到的網(wǎng)頁(yè)內(nèi)容,比如搜索框等等,而如果旁邊的按鈕使用圖像的話,他們豎直方向就很不容易對(duì)齊,這一直是大家所頭疼的問題,于是搜集整理一2012-12-11表單元素radio select對(duì)齊與IE6下雙邊距問題解決方案
之前一直困擾自己的一個(gè)問題就是表單內(nèi)radio、select等的對(duì)齊問題,搞得自己相當(dāng)惱.今天終于花了些時(shí)間找到了好的解決方法.也希望能夠幫到跟我同樣聞form色變的人2012-12-07網(wǎng)頁(yè)中form表單的元素會(huì)出現(xiàn)一些問題:比如文本域和按鈕對(duì)齊問題,這個(gè)問題會(huì)影響到界面的美觀度,本文將介紹如何解決此類問題,需要了解的朋友可以參考下2012-11-30表單元素input、文字完美垂直居中對(duì)齊方法.2012-07-11最新評(píng)論
大家感興趣的內(nèi)容
最近更新的內(nèi)容