0

CSS 経由で背景画像を使用して、サイトのいくつかの要素のスタイルを設定しています。Chrome と IE の両方で見られる問題は、行の行の高さが画像の高さよりも小さい場合、画像がトリミングされることです。ここに問題を示すフィドルがあります (これも Chrome または IE でこれを表示して問題を確認してください。Firefox は私が望むようにレンダリングします)。

HTML

<ul>
    <li class="icon"><a href="#">Link 1</a></li>
    <li class="icon"><a href="#">Link 2</a></li>
    <li class="icon">No Link Here</li>
</ul>

CSS

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul li {
    display: inline;
    font-size: 13px;
    margin: 0 1em 0 0;
    padding: 0;
}

ul li.icon {
    background: url(http://www.borngeek.com/images/2013/stack_overflow_ex_01.gif) no-repeat left center;
    padding-left: 22px;
}

実際には、font-size をピクセル単位でハードコーディングしていないことに注意してください。13 ピクセルの高さでレンダリングされるだけです。問題を再現するために、ここに値をハードコーディングしました。

次のいずれも機能していないようです。

  • height、line-height、またはmin-heightさまざまな要素 (親要素も含む) の設定
  • overflowさまざまな方法で値を使用する

潜在的で問題のある回避策には、次のものがあります。

  • フォントサイズをより大きなものに変更する
  • 不明瞭paddingな値を使用して画像がクリップされないようにする
  • display: inline-block独自の問題がある を使用する
  • を使用してfloat: left、これにもいくつかのニットがあります
  • この場合、CSS の代わりに要素を使用する<img>ことは間違っていると感じます
  • この回答background-sizeで見つけたCSSプロパティを使用しますが、これのサポートはむらがあります

これを処理するよりクリーンな方法はありますか、それとも上記の回避策のいずれかが私の最善の策ですか? 私の唯一の目標は、親要素が 16x16 の画像全体をレンダリングするのに十分な高さになることです。

4

1 に答える 1

3

LI の上部と下部に 2 ピクセル (または上部に 3 ピクセルだけ) のパディングを強制します。これのポイントは、<li>の高さを画像の高さ (16px) と同じかそれ以上にすることです。あなたのフォントサイズは13pxなので、上部に3pxのパディング= 16px、または上下に2pxのパディング= 17pxでも機能します. これは一種の「ベストプラクティス」であるため、最良の方法です。

http://jsfiddle.net/xkFfs/3/

padding: 2px 0;

または、background-position:

http://jsfiddle.net/xkFfs/6/

background-position: 2px 0px;
于 2013-04-01T20:45:43.780 に答える