IE FF(火狐) line-height兼容詳解

搞個系統,前臺還得自己做,我最怕做前臺,不是做不好,而是我是個完美主義,我一做前臺就想把網頁搞的IE6,IE7,火狐一點都不差,用DIV+CSS做,可是這樣做的話真的有點廢時間,這不今天就要搞個新聞列表,每條新聞前面都有個小圖標修飾,我把每條新聞的高度,line- height設成28px,小圖標作爲background,發現小圖標在ie下是對齊的,但是火狐下好像向上偏了一像素,想想算了,不就一像素嗎,不過越想越不舒服(其實這裏能寫一些兼容代碼解決,但是我本人不喜歡寫!imoportant之類的東西,個人意見也不推薦大家寫,大部分的問題其實都可以不用兼容代碼解決)於是我打開網易,用火狐看看它有沒有小圖標沒對齊的地方,心想如果網易都沒有對其的話我也就算了,畢竟用火狐的人少,還是以IE爲主,可是在狐火下,網易的頁面幾乎和IE一模一樣,唉,人家都能做到,我怎麼就做不到呢。我立即把網易的主頁另存下來,用vs打開研究它的寫法,發現網易有小圖標的地方CSS定義的和我差不多,也沒用什麼CSS hack兼容,那我就納悶了,爲什麼它能對其,我的就不能,難道真的是人品問題,我仔細對比了下,發現它的line-height和height設的都是 25px,文字大小是14px,我的對應的是28px和12px,不會這個有問題吧,隨後我把我的也設成25px和12px,刷新一看,火狐和iE竟然都對齊了,怎麼回事,這不搞笑嗎。難道只有25px和14px的搭配才能兼容,之後我不服氣的做了一些測試含血得出了以下結論……。

   驗證過程如下:

   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火狐反之的規律渲染,除不盡時的算法和小字體一樣,關於大號字的規律如果哪位同學能有所突破,請告知.

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章