リンクまたは背景色を持つインライン要素を指定すると、テキストを垂直方向にピクセルの中央に配置したいと思います
<a href="#">Hello world</a>
a {
line-height: 22px;
font-size: 16px;
background: #f00;
color: #fff;
text-decoration: none;
}
Firefox のベースライン レンダリングは 1 ピクセル違うようです。ブラウザをスニッフィングしてブラウザ固有のスタイルシートを挿入することなく、どのように補正すればよいのでしょうか? ベンダープレフィックス付きのソリューションに頼ることに満足しています。
クロスブラウザー ベースライン レンダリングの違いは、次の 2 つの点に起因する可能性が最も高いでしょう。
ブラウザ間でフォントのレンダリングが異なります。これにより、カーニングと行の高さがわずかに異なる場合があります。
また、一部のブラウザーは、サブピクセル レンダリングなどのために、ピクセルを小数点以下の桁数まで出力しようとしていると思います。これにより、ブラウザ間で非常にわずかな不連続が生じる場合があります。
答えは、使用するすべてのフォント em が整数を出力することを確認することです。あなたの例ではピクセル値全体を使用しているため、これはフォントのレンダリングにかかっている可能性があると思います。
リンクを正確な高さにするには、CSS を指定します。
a {
display: block;
height: 22px;
overflow: hidden; }
これにより、フォントのレンダリングに依存しない正確な高さが得られます。