1

これは解決するのが難しい問題です。

DirectWrite と GDI を使用してフォントをレンダリングするブラウザー間で行の高さが異なると、サイトのデザインに悪影響を及ぼします。これにより、IE9 および FF4+ で背景画像の位置がずれます (他の問題の中でも特に)。

簡単な例を次に示します。

すでに CSS をリセットしたと仮定しましょう。コード：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<style>
span {
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    border: solid 1px;
}
</style>
</head>
<body>
<span>Some example text</span>
</body>
</html>

これは次のようにレンダリングされます。

直接書き込み v gdi

ご覧のとおり、IE9 (および firefox 4+) のテキストは、古い GDI ブラウザーよりも 1px 短くなっています。これは、私のサイトのレイアウト全体で重大な問題を引き起こします。特に、私のサイトのまったく同じページから取得した 2 つのスクリーンショットから示されているように、背景画像 (アイコンなど) をインライン要素に配置する場合 (明確にするために 3 ピクセルごとに行を追加し、線を引いています)テキストの最初の行まで):

ずれた

最終的な結果として、アイコンは IE9 で 1 ピクセルおよび 2 ピクセル低く表示されます。考えられる解決策の 1 つは、2px の padding-top を追加して、テキストを下に押し下げて、アイコンとインラインのままにすることです。ハックで完全な混乱は別として (CSS で firefox 4+ を選択できますか?) 必要なパディングは要素ごとに異なり (私の場合は 1 ～ 3 ピクセル)、それ自体が問題を引き起こします。

何が起こっている？場合によっては DirectWrite がフォントを小さくできることは理解していますが、ブラウザー メーカーが行の高さを以前のものから変更したのはなぜですか? 確かに、これは多くのサイトに影響を与えています。

どんな助けでも大歓迎です。

乾杯、レオ

4

0 に答える 0