FF/IEとChromeのCSSテキスト下線描画の違い

Question

質問があります。次のURLでは、h1、h2、p要素のそれぞれにCSSスタイルを設定しています。 h1要素にはテキスト装飾の下線が付きます。

http://nostalgia.mx/light2.html

Firefoxを開き+ IEとクロームの両方を持つサイトとあなたは深遠な違いに気づくでしょう：

1.-のfirefox +つまりは下線されている要素のフォントサイズに下線が比例しますこれは非常にスマートです。 Googleはそれを薄く、非比例に保ちます。

2.- firefox +つまり、テキスト自体を下線で「融合」または「融合」すると、シルエットは非常に素敵です。一方、Chromeはそうではありません。

OK。だから私の質問は：

FFの/ IEのようなクロムの外観を作ることは可能ですか？

よろしく Sotkra

Answer 1

現象はあなただけ大きなフォントサイズの要素を持っていて、それにtext-decoration: underlineを設定し、簡単な設定で観察することができます。ブラウザは、アンダーラインの幅に関してこれをさまざまな方法で実装します。 CSSにこれを影響する方法はありません。下線の他のフィーチャに影響するプロパティがあるにもかかわらず、CSS3 Textドラフトには何もありません。ディスカッションでは、a property for setting underline has been proposed。

border-bottomを使用して下線をシミュレートする場合は、マークアップとCSSでいくつかの問題が発生し、幅と色と位置を設定できます。例：スタイル

H1 {フォントサイズと

見出し

：150ピクセル。 } h1 {border-bottom：solid 0.05em;表示：インラインブロック; } h1スパン{位置：相対; top：0.2em; }

デモ：このアプローチではhttp://jsfiddle.net/yucca42/Qdeek/

、あなたは多分内部の要素を包む、1行に見出しを設定すると、おそらく他の要素に設定して、適切な上下のマージンを（使用しての世話をする必要がありますdivコンテナ）、display: inline-blockは通常の見出しのレンダリングスタイルを削除します。