9

これは私を夢中にさせています。Firefox のテキストは、Chrome よりも 1 ピクセル低くなります。これは、html または body のマージンまたはパディングの問題ではありません。試してみました。丸めの問題でもないようです。ここに画像があります：

ここに画像の説明を入力

最初の「Hello」は Firefox 13、2 番目の「Hello」は IE9、「Hello World」は Chrome です。

コードは次のとおりです (非常に単純です)。

<!DOCTYPE html>
<html lang="en-us">
    <head>
        <meta charset="utf-8">
        <!-- Always force latest IE rendering engine and chrome frame -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Pixel Bug?</title>
    <style type="text/css">
        html{
            font-size: 100%;
        }
        body{
            font-size: 1em;
            line-height: 1.5;
            background: white url('images/grid16.png') -4px -6px;
        }
        p{
            margin: 1.5em 0;
        }
    </style>
</head>
<body>
    <p>Hello World!</p>
    <p>Hello World 2!</p>
</body>
</html>

ただのバグですか？ここで何が起こっているのですか？私は FireFox だけで回避したくはありません。なぜこれが起こっているのかを理解したいだけです。

編集：

さらに調査すると、レンダリングのバグのようですが、それでも混乱します。たとえば、テキストの高さは 24px にする必要があります。これは、これを引き起こす丸め誤差を実際に引き起こすべきではありません。それでも、行の高さを明示的に 23px に変更すると、整列します。理由がわかりません。

EDIT2：考えられる理由は？https://bugzilla.mozilla.org/show_bug.cgi?id=442139

EDIT3: 20px のフォントと 40px の行の高さを使用して並べます。これはレンダリングのバグだと思います。16/24がかなり標準なので、それはひどいです:/

4

1 に答える 1

2

ここで私の以前の答えを参照してください:: CSSの空白とlist-style-imageはFirefox11以降でスタックしません

あなたはreset.cssを使用していないため、問題が発生します

ここに、reset.cssの多くのリンクがあります。reset.css を使用する理由は、すべてのuser-agent（browser）cssが基本設定になり、ブラウザーごとに異なって見えないためです。

編集:: OPがreset.cssを使用したため。問題を再現できません。だから他の理由は

また、@steveaxの発言にも同意します。

編集2:: それについて深く行きたい場合。

于 2012-06-13T18:26:46.420 に答える