3

Windows 上の Firefox 3.6、IE7、および Opera 10 では、この HTML は奇妙な動作をします。

<html><head></head>
<style>
span {
    font-family: monospace; background-color: green;
}
span.b {
    font-weight: bold;
}
</style>
<body>
<span>Text</span><span class="b">Text</span><span>Text</span>
</body>
</html>

中央の太字部分は 1 ピクセル下にシフトされています。他のフォントでは発生しません。

何故ですか？どうすれば修正できますか？

4

3 に答える 3

1

何故ですか？

すばらしい質問です。理由を理解するために30分を費やしただけで、無駄になりました。Marcggのソリューションも機能していないようですが、オフセットはまだ存在しています。グーグルは何も出さない。これは、Windowsでのみ発生するようです。おっしゃるブラウザだけでなく、Opera9とIE6でも発生します。ただし、Firefox2.0にはありません。不可解。

どうすれば修正できますか？

私にとってこれまでに機能した唯一の解決策はこれです：

span {
    font-family: Courier; background-color: green;
}
span.b {
    font-weight: bold;
}

つまり、モノスペースの代わりにCourierを指定します。これは、私がテストしたすべてのブラウザー（Windows2000ではIE6、Opera 9、FF 2.0、UbuntuではOpera 10、FF 3、およびKonqueror）で一貫してレンダリングされます。理由はまだわかりません。

于 2010-03-12T12:10:16.450 に答える
1

それは単なる光学効果です。スクリーンショットを取得して拡大します。テキストのベースラインがまったく変化していないことがわかります。

別の色のコントラストを選択すると、自動的に修正されるはずです。

アップデート

代替テキスト http://img690.imageshack.us/img690/421/opticaleffect.png

于 2010-03-12T12:52:10.240 に答える
0

問題は、「モノスペース」が要求されたときにほとんどの Windows ブラウザーで使用されるデフォルトのフォントであるフォント「Courier New」です。太字のバリアントの場合、ベースラインは別のオフセットにあります。

<html><head></head>
<style>
span {
    font-family: "Courier New"; background-color: green;
}
span.b {
    font-weight: bold; vertical-align:top;
}
</style>
<body>
<span>Text</span><span class="b">Text</span><span>Text</span>
</body>
</html>

このコードでは、中央のテキストが上に移動している (= ベースライン オフセットが異なる) ことがわかりますが、背景色は適切に配置されています。

解決策は、フォントとして「Courier」を要求し、「Courier New」を避けることです。

于 2010-03-12T13:07:09.100 に答える