css樣式解決!
style="vertical-align: text-bottom;margin-bottom: 2px;"
一、問題產生的條件
對於14像素大小的字體是沒有本篇所要探討的單(復)選框與文字對齊的問題的。但是,對於12像素大小的文字,則就存在對齊問題了,尤其在Firefox火狐瀏覽器以及chrome谷歌瀏覽器下。
二、解決方案
下面我將提供五種解決方案,有三個方案沒有使用任何hack,且IE6,IE7,Firefox,chrome瀏覽器下表現都很好的,有一種方案使用了一個IE hack,但成本較低,各個瀏覽器表現良好。還有一種方案,代碼成本很低,但在chrome瀏覽器下文字稍微偏上,使用input類型選擇器,或chrome hack可以解決這個問題,但是對於單復選框這類控件,代碼一多反而不划算,權衡之下,不針對chrome瀏覽器單獨處理。
這些方案都是我經過平時積累,反復試驗得出的結論,其兼容性值得信賴。要使用的話就給單復選框命名一個class,該class樣式為下面方案提供的css樣式即可。
1.以vertical-align:text-bottom為基礎的css代碼如下:vertical-align:text-bottom; margin-bottom:2px; *margin-bottom:-2px;
css代碼如下:vertical-align:text-bottom; margin-bottom:2px; margin-bottom:-2px\9;
結果如下圖(以IE6瀏覽器和Firefox瀏覽器示例):
2.以vertical-align:text-top為基礎的
css代碼如下:height:13px; vertical-align:text-top; margin-top;
3.以vertical-align:bottom為基礎的
css代碼如下:height:15px; vertical-align:bottom; margin-bottom:3px; margin-top:-1px;
4.以vertical-align:top為基礎的
css代碼如下:height:14px; vertical-align:top;
5.以vertical-align:middle為基礎的
css代碼如下:vertical-align:middle; margin-top:-2px; margin-bottom:1px;
最后的說明
*未顯示在opera瀏覽器下測試的結果,原因一是opera市場份額奇怪的小,即使不管它也影響不大;二是減輕自己的截圖,對比處理的工作量。這里就直接用文字表述在opera瀏覽器下的表現吧。opera是個怪胎,應該來說,它對標准的支持應該是很好的,但是14像素的文字和單選框復選框卻是不對齊的,當然,12像素更不用說了。但是,在方案3和方案5下的表現卻是意外的好,所以方案3和方案5是不錯的方案。
*IE8瀏覽器下未測試,不是不想測,而是現在手頭上就一台電腦,IE8由於系統原因,測不了,抱歉。
*以上方案不一定是最優的方法,我沒有加入padding進行測試,還有其他一些屬性,只要有時間,將各類組合一個一個的試驗,可能會找到另外的方法。
*Firefox瀏覽器和chrome瀏覽器下的單選框和復選框默認是由一個margin值的。其兩者的值大小近乎一致,拿chrome瀏覽器舉例。在chrome谷歌瀏覽器下,radio單選框的默認margin值是:margin:3px 3px 0 5px;checkbox復選框的margin值為margin:3px 3px 3px 4px;而IE瀏覽器下似乎沒有margin值,但是對margin敏感。這是不用hack解決對齊問題的難點之一。
*最后,說句結論性的話,方案3和方案5從兼容性,代碼的利用率,css的消耗等來講都是我非常推薦的兩種方法。建議您試試!
曾在人人網的css代碼中看到使用vertialc-align:-3px解決此問題,我試過,雖然表現不能用完美形容,但確實緩解了對齊的問題,是個性價比非常高的方法。我是建議您試試的。