1

总而言之，我知道在 HTML 根元素上设置 font-size: 100%，以及 HTML5 重置和 rem 单位，应该会导致文本在不同的浏览器上以相同的大小呈现。

但是，我在 Firefox 上看到比 OS X 上的 Chrome 更大的渲染文本。这是一个测试用例：

<!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 元素的字体大小。
  • 两种浏览器都设置为以实际大小查看（无缩放）。

我错过了什么？谢谢。

4

2 回答 2

2

每个浏览器对 100% 的含义都有不同的翻译。尤其是 IE，但也适用于其他人。获得真正相同大小的唯一方法是使用像素作为测量单位。然后你知道它会是一致的。

于 2013-08-02T03:45:36.517 回答
0

您是否将 html 字体大小设置为 100%？这意味着浏览器在其用户设置中使用字体大小！

例如，如果用户将 IE9 的默认字体大小设置为“特大”，则 100% 表示特大。就这些。

于 2013-08-02T18:48:52.750 回答