最近的工作中,有很多表單的制作,很多次都碰到復選框與文字對齊的問題,發現在不同的瀏覽器中,顯示各異,顯示效果如下

觀察發現,IE6、IE7 顯示效果基本相同,算是顯示比較正常的效果,IE8、safari 和火狐顯示效果基本相同,兩個文字都偏下,而opera稍偏下。在之前我的解決方法,都是通過文字外面套上另外的標簽,等,通過調整input標簽和label的html標簽來對齊,大概方法即是讓input 和label 標簽都左浮動,但前提一定是在寫頁面的時候,文字外面加了label 標簽,這種方法應為定義了大量的浮動,還需要清除浮動,才能保證下面頁面的正常顯示,或者有些人用相對定位等方法,如果文字外面沒有套label標簽,更沒有其他標簽呢?經過查找,發現其實還是有很簡單的方法就能解決問題
方法一:如果將font-family中的第一個字體設置為Tahoma,則可以實現對齊(Verdana等字體也可以)。次方法來源與 藍色理想 http://www.blueidea.com/tech/web/2009/6910_3.asp
如果文字外面有label 標簽,只要定義input,label {vertical-align:middle} 即可,
注意:因為單選框或是復選框有外邊距,所以需要先去除掉他的外邊距。
方法二: 定義input 標簽vertical-align 屬性,調整input 的上下邊距,來實現input和文字的水平對齊
.admin_more input{vertical-align: text-bottom; margin-bottom:2px; *margin-bottom:-2px;}
原文:
http://blog.csdn.net/lifen_zhang/article/details/5415768