競合イタリックが

Question

を使用する場合、私は、次の問題がある：

Iは、ライン高さ18pxとフォントサイズ16pxに有するスパン構成要素を有しています。 これは、内部のテキストがイタリック体でない場合に効果的です。スパンは18ピクセルの高さのままです。

スパン内のテキストがイタリックまたは太字である場合に問題が発生します。何らかの理由で、スパン要素の高さが1ピクセルを追加し、19ピクセルの高さのスパンを取得します。

この問題はFirefoxでのみ発生します。 IE、Safari、Opera、Chromeではこの問題はありません。スパンは18フィートの高さのままです。

誰もこの問題を以前に持っていましたか？

これは、問題のあるコードです：

span 
{ 
    font-size : 18px ; 
    line-height : 18px ; 
} 

span.italicSpan 
{ 
    font-style : italic; 
} 

例はここにあります：

http://edincanada.co.cc/test/shjs-0.6/test7.html

必要に応じて他のブラウザをご確認ください。 18px

Answer 1

インライン要素の線高さを調整することはできません。フロートするか、display: blockまたはdisplay: inline-blockに設定する必要があります。

Answer 2

FirebugがインストールされたFirefox 8のサンプルページを見る限り、最初のdiv要素にも問題があります。

デフォルトでは、div要素は親からline-heightを継承しています。これは、値が19pxになります（これはフォントとブラウザによって異なります）。内部要素の行の高さの設定は、実際の行の高さの下限を意味します。

このように、解決策は、囲むブロックレベル要素に線高を設定することです（または、別の要素に示唆されているように、スパン要素を表示中のブロック要素に変えることです）。

Answer 3

私もこの問題に遭遇しました。私は特定のフォントに関連していると思います（例えば、Sorts Mill Goudyで起こりました）、イタリック体のローマ字に対する相対的な大きさはどのようになっていますか？行の高さは、その中のインライン要素の "content box"に依存します。したがって、イタリック体が大きいと計算された行の高さが混乱する可能性があります。

私が見つけた唯一の信頼できる解決策（別のフォントを使用する以外）は、イタリック体のvertical-alignプロパティで再生することです。本文がbaselineにアライメントされているとき、斜体を縦に並べると、行のtopまたはbottomに並べ替えられます。

もちろん、本文のイタリック体が微妙にずれています。結局のところ、これが役立つかどうかはあなた次第です。