8

こんにちは、私はこの問題を抱えています:

問題

左側はクロム、右側はFirefoxのスクリーンショットです。テキストの高さが異なります。html の構造は静かでシンプルです。h1タグが配置されているフィールドセットであるdivだけです。その周りに1pxの枠があります。h1 タグの高さは 20px で、行の高さは 20px です。次は同じサイズのh2タグです。問題はテキストの高さです。

例2

firefox では、これは chrome や safari よりも 1px 低いようです。

最新バージョンで eric meyers の CSS リセットを使用しています。それが原因ではないはずです。

誰かが私を助けるためのヒントを持っていれば、それは素晴らしいことです.

どうもありがとう。

4

1 に答える 1

2

デフォルトの行の高さは、ブラウザーによって、またフォント サイズが異なるフォント ファミリーによって、大幅に異なります。明示的な行の高さを設定すると、それに対処できます。

これは、ブラウザがサブピクセル テキストの配置を処理する方法の違いによるものです。line-height が 20 ピクセルで font-size が 15 ピクセルの場合、テキストは行ボックスの上から 2.5 ピクセルの位置に配置する必要があります。Gecko は実際にそれを行い、WebKit は位置を整数ピクセルに丸めるだけです。場合によっては、2 つのアプローチで得られる答えが 1 ピクセル異なります。

いずれにせよ、ハーフ リーディングが整数であること (つまり、line-height から font-size を差し引いた値が偶数であること) を確認することで、本当に必要な場合はレンダリングの一貫性が向上します。

これを試して：

div h1 {
  -webkit-padding-before: 1px;
}

別の可能な解決策：

@media screen and (-webkit-min-device-pixel-ratio:0) {
    div h1 {
        line-height:19px;
    }
}
于 2013-03-18T17:53:25.953 に答える