1

HTML ルート要素で font-size: 100% を設定し、HTML5 のリセットと rem ユニットを使用すると、異なるブラウザーでテキストが同じサイズでレンダリングされることを理解しました。

ただし、OS X の Chrome よりも Firefox の方がレンダリングされたテキストが大きくなります。テスト ケースは次のとおりです。

<!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 の方が大きいことがわかります。

  • HTML 要素の font-size を 100% に設定する Google の HTML5 リセットを使用しています。私も自分で100％に設定しました。
  • font-family を同じに設定しました。
  • 私は rem 単位を使用しています。これは、ルート HTML 要素に基づいてフォント サイズを設定する必要があります。
  • どちらのブラウザも実際のサイズで表示するように設定されています (ズームなし)。

私は何が欠けていますか？ありがとう。

4

2 に答える 2

2

ブラウザごとに、100% の意味の解釈が異なります。特にIEだけでなく、他のものでも。完全に同じサイズにする唯一の方法は、測定単位としてピクセルを使用することです。その後、一貫性があることがわかります。

于 2013-08-02T03:45:36.517 に答える