WebKit的VS在框字體的字形的Mozilla垂直取向

Glyphs in Box WebKit的VS在框字體的字形的Mozilla垂直取向

該測試圖像示出了如何盒VS火狐（5.0.5的Safari和Firefox 5.0.1內完全不同的Safari位置文本的Mac OS X 10.6 0.7）。注意sans-serif的「S」是如何對接到Firefox的盒子頂部而不是Safari的。差異似乎取決於使用的字體，其中一些甚至一致呈現。

我讀過people saying，這是因爲（通過設置比規模較小的高度和固定）font-size和line-height之間的四捨五入問題，但我認爲這通過我的例子反駁，其中在Firefox無襯線/黑體總是將頂在盒子裏。

對我來說，它看起來像Safari比Firefox更正確，即文本通常更多地圍繞中間線。

有沒有一種讓他們更一致的好方法？我的目標只有符合標準的瀏覽器。

NB1：這與vertical-align無關。
NB2：我調查了similar problem in the past沒有完全令人滿意的結果。

我的測試代碼：http://jsbin.com/omaboc

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <style type="text/css"> 
      body { 
       font-size: 50px; 
       line-height: 1em; 
      } 
      div { 
      background: #b5e260; 
       margin-bottom: 5px; 
       } 
     </style> 
    </head> 
    <body> 
     <div style="font-family: sans-serif">Some text @ this box</div> 
     <div style="font-family: serif">Some text @ this box</div> 
     <div style="font-family: arial">Some text @ this box</div> 
     <div style="font-family: helvetica">Some text @ this box</div> 
     <div style="font-family: courier">Some text @ this box</div> 
     <div style="font-family: georgia">Some text @ this box</div> 
    </body> 
</html>

來源

2011-07-14 Martin Algesten

在Windows 7上不會發生同樣的問題，請參閱：http://i.stack.imgur.com/xQmTe.gif – thirtydot

Exciting 。情節變濃了！ +1爲GIF動畫;） –

檢查出這隻小狗接受的答案：http：// stackoverflow。com/questions/7155174/inconsistent-font-size-and-indentation-on-firefox-chrome – skybondsor