驗證過程如下:
1. 首先設置一個層height,line-height 30px,文字12px開始測試。
IE下如圖:
火狐如圖:
從這裏我們看到了IE和火狐差異,大家可能比較奇怪的是明明十二號的字,怎麼變成了11px,呵呵,我也奇怪,一會還有更奇怪的。
2. height,line-height 29px,文字12px開始測試:
ie如圖:
火狐如圖:
天哪,怎麼一樣了,無語,12px的字還是顯示了11px,繼續測試。
3.height,line-height 30px,文字12px,加下劃線開始測試:
ie如圖:
火狐如圖:
加下滑線的12px的字竟然變成了13px,剛纔是11px,狂暈。
4.height,line-height 29px,文字12px,加下劃線開始測試:
ie如圖:
火狐如圖:
看到這裏,如果文字的高度是按照加下滑線的總高度來算的話,我大致推理出算法了。
如果所有文字都按照加了下滑線算(就算你沒設置下劃線,其實由上面的幾組圖也能推出來下劃線在算法裏其實是一直存在的),那麼12px的文字實際上就是13px。那麼上面的幾組數據就可以直接分爲兩組。
1)height,line-height 30px 文字12px;
2)height,lineheight 29px 文字12px;
對於第一組,30的高減去13的文字高度還剩下17,除2除不盡,呵呵,就是因爲這除不盡,IE和火狐的不兼容就來了,請仔細觀察帶下劃線的height 30px帶下劃線的那組IE和火狐對比圖,就會發現當除不盡時,IE爲上空白分配了8px,爲下空白分配9px,火狐恰恰相反,上面分配了9px,下面分配了8px,所以說這種情況下IE的文字感覺就高些了。
對於第二組,29的高減去13的文字高還剩下16,除2剛好除盡,所以IE和火狐上下空白等分配了8px,所以就一模一樣了,大家可以參考height 29px帶下劃線那組IE和火狐對比圖。
呵呵,那麼結論就很簡單了,如果你想要你的line-height文字居中兼容IE和火狐,那麼你就要使你的行高設定和文字大小設定要滿足他們相減是偶數,能被2除。
公式:(行高-(文字高+1))%2=0(比如行高29px那組:(29-(12+1))/2=8 剛好能被2除)
通過這個公式,我將驗證下面兩組組合:
1 行高30px 文字高度13px 公式:(30-(13+1))/2=8
ie結果如圖:
火狐結果如圖:
結果一模一樣,不知道是不是巧合,再測一組
2 行高31px 文字高度14px 公式:(31-(14+1))/2=8
IE結果如圖:
火狐結果如圖:
還是一樣,呵呵大家要有興趣的話再測測,這個也只是我無聊研究出來的,有什麼不正確的請大家多指正,重要的是給同行們提供一些幫助和解決問題的思路。
注:IE 和火狐的測試都是在網頁設置了默認字體下完成的,以上的IE版本爲IE6和IE7,IE8的宋體line-height我覺得很有問題,大家可以用一句 meta兼容(像網易、新浪、QQ等大型門戶都是這麼做的,看來也都是真的沒有精力兼容IE8了),我設置默認字體爲:
body{font-size:12px;font-family:宋體,Arial Narrow,arial,serif}
是簡體中文的默認字體,火狐下必須有該樣式,不然字體不同沒有任何可比性,還有我要發下牢騷,火狐現在搞個什麼默認字體實在不好,你不在火狐的設置裏開啓"允許頁面選擇顯示字體而無需上面設置"這一項,不管你在CSS中設置什麼默認字體它都用"微軟雅黑"顯示,無語啊,這麼弱智的功能也能想到。希望有大量用戶向火狐反映,設個設置也太不人性化了,是不是搞反了,我的火狐版本是3.6.3中國版,你看你的是不是和我有一樣的問題,如果只有我用的是這樣,請告知,謝謝。
另外,我碰過這種情況,一條新聞放在Li裏,Li裏又包含英文鏈接,就是這種結構:
<li><a>Hello Word</a></li>
如果你的CSS設置如下:
li{font-size:14px;height:31px;line-height:31px;}
a{font-size:12px;height:31px;line-height:31px;}
這樣也會導致火狐的行高異常,所以要麼直接在LI設字體大小,要不在A裏設,最好不要搞出這種混亂的邏輯,火狐不喜歡這樣。
最新測試發現以上規律只適合宋體10,11,12,13,14,15,16,18px大小字體,超過20px文字的加下滑線大小就是其本身如上20px,測試發現大號字體按照以上算法就算不加一相減能除盡還是按照IE上空白少分2px,下空白多分2px火狐反之的規律渲染,除不盡時的算法和小字體一樣,關於大號字的規律如果哪位同學能有所突破,請告知.