1

Firefox で奇妙な問題が発生しています。デバッグ コンソールが嘘をついているように見えるか、何か不足しているようです。

body タグの CSS は次のとおりです。

html, body {
    width: 100%; 
}

body {
    padding: 5% 10% 0 10%; 
    font-size: 1.2em;
    font-family: 'Raleway', Arial, sans-serif; 
    font-weight: 300; 
    color: #2b2b2b; 
    margin: auto; 
    max-width: 1200px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

プロパティ「box-sizing」を使用しているため、最大幅は内部にパディングを入れて 1200px にする必要があります。デバッグ コンソールが (右下で) 言っているように、コンテンツ領域の幅は 898px であるはずですが、それを測定すると、実際に得られるのは次のとおりです。

Firefox で box-sizing:border-box を使用した場合の CSS パディングの問題

box-sizing:border-box プロパティについて間違っていますか?

君たちありがとう ！

編集:ここでは、単純化されたケースでjsfiddle を作成しました。

下の画像を見てください。HTML、インスペクタによって与えられたボックス モデル、レンダリング、Photoshop で追加した赤い四角 (実際には 150x150px) が見つかります。わかりません。インスペクターはボックスが 150x150 であると言っていますが、それは間違っています...

Firefox でのボックスのサイズ変更とインスペクタの問題

4

3 に答える 3

0

実際、Windows 8 はデフォルトで 125% でズームしており、Firefox はこの比率をデフォルトのズーム レベルとして使用しています。

次に、2 つの選択肢があります。

  1. Windows のズーム レベルを 100% に変更します:コントロール パネル > 外観 > ディスプレイ
  2. Firefox のズーム率を 1.0に設定します。ブラウザのアドレス バーにabout:configと入力し、 layout.css.devPixelsPerPxを検索して1.0に設定します。

詳細については、こちらをご覧ください: https://support.mozilla.org/fr/questions/963759

Windows 8 のユーザーのほとんどは、サイトが Firefox で 125% 拡大されるのを目にするでしょう。

于 2014-01-08T13:36:45.897 に答える
0

padding valuesからではなく、画面全体から計算されるため1200pxです。ウィンドウのサイズを変更する (小さくする) と、パディングが画面の幅の値ではなく、画面の幅の値に従って調整されることがわかります。1200px

于 2014-01-08T13:01:48.530 に答える