11

問題は、FirefoxおよびWebKitベースのブラウザーが、高さ/行の高さが均一でフォントサイズが不均一な要素に含まれている場合（またはその逆の場合）、テキストをさまざまな方法で垂直方向に整列させるように見えることです。私はいくつかの同様のスレッドを見てきましたが、私の質問に対する素晴らしい説明は実際には見ていません。

次の例を考えてみましょう。

.box {
  font-size: 15px;
  font-family: Helvetica, Arial;
  background-color: Blue;
  height: 20px;
  width: 60px;
  color: White;
  line-height: 20px;
}

<div class="box">
  A text.
</div>

FirefoxとChromeの垂直方向の配置の違いを示す例。

これを修正する方法はありますか？「text-align」プロパティまたは私が見逃したものはありますか？

4

4 に答える 4

14

これは、ブラウザがサブピクセル テキストの配置を処理する方法の違いによるものです。line-height が 20 ピクセルで font-size が 15 ピクセルの場合、テキストは行ボックスの上部から 2.5 ピクセルの位置に配置する必要があります。Geckoは実際にそれを行います (そして、ペイント時に必要に応じてピクセル グリッドにアンチエイリアスまたはスナップします)。WebKit は、レイアウト中に位置を整数ピクセルに丸めるだけです。場合によっては、2 つのアプローチで得られる答えが 1 ピクセル異なります。それらを並べて比較していない限り、どうすれば違いがあるとさえ言えますか?

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

于 2011-05-04T12:24:20.647 に答える
9

これはブラウザのレンダリングの問題です。指定された高さより 1 ピクセル小さい line-height を使用します。次に例を示します。

    .box
{
   background-color: Blue;
   color: White;
   font-family: Helvetica,Arial;
   font-size: 15px;
   height: 18px;
   line-height: 17px;
   width: 60px;
}
于 2011-05-04T08:29:42.993 に答える
1

正確な垂直方向の配置を行う方法を探している場合は、Stack Overflow の質問Problem with vertical-align: middle; を確認してください。- そこで解決策を説明しました。

Firebug と Chrome の表示が異なる理由を知りたい場合は、もう少し複雑になります。行の高さの配置はフォント行のレンダリングに基づいており、フォントはブラウザー間で非常に異なる方法で処理できます。たとえば、font-smoothing と font-weight は実際にページを混乱させる可能性があります。

また、このページで CSS リセットを使用していますか? フォント関連の調整も含まれており、クロスブラウザーの問題を克服するのに役立つ場合があります. CSS ツール: CSS のリセットを参照してください。

于 2011-05-04T08:31:45.053 に答える
0

うーん、ひどいけど本当！アイコンに小さなカウントバブルを作成しようとして、これに遭遇しました。非常に小さいため、テキストのすぐ横に配置して、すべてのピクセルをカウントする必要がありました。行の高さをテキストサイズの1分の1にすると、FFとChromeの間で表示フィールドが水平になります。

于 2011-10-22T02:46:07.937 に答える