CSSのテキストがリセットされていますか？

Question

こんにちは、私はこの問題を持っている：

あなたはそれがクロム、右側Firefoxであるかのスクリーンショットがある左手側を見ることができるように。テキストは同じ高さではありません。 HTMLの構造は単純です。フィールドセットがh1タグに置かれているdivだけです。その周りには1pxの境界線があります。そのh1タグの高さは20px、行の高さは20pxです。次は同じサイズのh2タグです。問題はテキストの高さです。 Firefoxで

ChromeとSafariでより1ピクセル低いようです。

最新バージョンではeric meyersのcss resetを使用しています。それはそれによって引き起こされるべきではありません。

誰かが私を助けるヒントを持っていれば素晴らしいことでしょう。

ありがとう。

Answer 1

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

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

いずれにしても、ハーフ・リーディングが整数であること（つまり、行の高さからfont-sizeを除いた値が偶数であること）が本当に必要な場合、レンダリングの一貫性が向上します。

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

---

もう1つの可能な解決策：その高さが同一であなたの写真を見て

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    div h1 { 
     line-height:19px; 
    } 
}