即使使用HTML重置，爲什麼Chrome和Firefox上的文本呈現不同大小？

所有，我明白在HTML根元素上設置font-size：100％以及HTML5重置和rem單位應該會導致文本在不同瀏覽器上以相同大小呈現。即使使用HTML重置，爲什麼Chrome和Firefox上的文本呈現不同大小？

但是我看到更大的呈現的文本在Firefox上比在Chrome上的OS X.這是一個測試案例：

<!DOCTYPE HTML> 
<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
     <script> 
     $(document).ready(function() { 
      var mWidth = $('#test').width(); 
      alert("width is " + mWidth); 
     }); 
     </script> 
     <link rel="stylesheet" type="text/css" href="http://reset5.googlecode.com/hg/reset.min.css" /> 
     <style> 
     html {font-size: 100%; padding: 0; margin: 0; font-family: Georgia;} 
     h1 {display: inline; padding: 0;margin: 0; font-size: 2rem;} 
     </style> 
     <title>Font Size Test</title> 
    </head> 
<body> 
    <h1 id="test">Testing that font size 100% is the same in Chrome as in Firefox.</h1> 
</body> 
</html>

要看到它的工作，你必須讓你的瀏覽器窗口寬度足以顯示全線文本。您應該看到報告寬度的差異，並且從視覺上您應該看到Firefox中的文字較大。

我正在使用Google的HTML5重置，它在HTML元素上設置字體大小爲100％。我也把它自己設定爲100％。
我已經設置字體家族是相同的。
我使用rem單元，它應該將字體大小放在根HTML元素上。
兩個瀏覽器都設置爲以實際大小（無縮放）查看。

我錯過了什麼？謝謝。

來源

2013-08-02 North Krimsly

每個瀏覽器都有不同的100％含義的翻譯。特別是IE瀏覽器，但也對其他人獲得真正相同大小的唯一方法是使用像素作爲測量單位。那麼你知道這將是一致的。

來源

2013-08-02 03:45:36 jons

除了像素尺寸大不相同的機器上，例如在超高分辨率手機上，一個「瀏覽器像素」可能意味着兩個或更多設備像素。 –

Retina設備不會像字體一樣在css中進行像素測量。它們呈現在非視網膜屏幕上。更尖銳！但是它們與佈局其餘部分的相對尺寸是相同的。畢竟這都是相對的。 – jons

您是否將html字體大小設置爲100％？這意味着瀏覽器在其用戶設置中使用字體大小！

例如，如果用戶將IE9的默認字體大小設置爲「超大」，那麼100％意味着超大。就這些。

來源

2013-08-02 18:48:52

即使使用HTML重置，爲什麼Chrome和Firefox上的文本呈現不同大小？

回答

相關問題