10

左側にアイコンが表示されたインラインリンクがいくつかあります（パディング+背景）が、フォントが小さすぎると、画像が行の高さに収まらず、上下にトリミングされます。javascriptを使用せずに、それが発生するのを防ぐ方法はありますか？フォントサイズをピクセル単位で設定したくありません。

非相対値（画像の高さ）に設定されたmin-line-heightが理想的です。

4

3 に答える 3

9

ブロック要素内のインライン要素を扱う場合、バウンディング ボックスのサイズを変更するための多くのオプションはありません。 min-heightインライン要素では機能せず、line-height何の効果もありません。

適切に設定するpaddingことは妥当なオプションかもしれませんが、要素の背景が含まれているブロック内の他の要素と重なるという問題に遭遇する可能性があります。

簡単なデモとして、これを試してください：

<!DOCTYPE html>
<html>
    <head>
        <title>Demo</title>
        <style type="text/css">
            span {
                background: #0F0;
                padding:    0.5em 0;
            }
        </style>
    </head>
    <body>
        <p>This is some demo text.  Look at how <span>texty</span> it is.</p>
    </body>
</html>

スパンの背景がtexty垂直方向に拡大されていることがわかりますが、前後の行のテキストと重なっています。この問題を回避するために、最新のブラウザーで要素のdisplayプロパティをinline-blockに設定することもできますが、その場合、行間隔に一貫性がなくなり、テキスト ブロック内にあるとほぼ間違いなく気が散ってしまいます。

好むと好まざるとにかかわらず、リンクに適用したい画像が表示されるテキストに合うようにするのが最善の方法だと思います。

于 2009-11-16T14:47:38.573 に答える
1

display:inline-blockインラインタグは少し制限されているため、最小高さを許可するために使用できる場合があります

于 2009-11-16T14:48:43.907 に答える