html - 我怎样才能 "contain"背景图片？

Question

我正在通过 CSS 使用背景图片来设计我网站上的一些元素。我在 Chrome 和 IE 中看到的问题是，当线条的行高小于图像高度时，图像会被裁剪。 Here's a fiddle演示了这个问题(再次，用 Chrome 或 IE 查看这个问题；Firefox 呈现我想要的东西)，这是来自所述 fiddle 的相应代码:

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;
}

请注意，实际上我不会以像素为单位对字体大小进行硬编码；它们最终被渲染为 13 像素高。我已在此处对值进行硬编码以重现该问题。

以下似乎都不起作用:

• 设置height , line-height , 或 min-height关于各种元素(甚至是父元素)
• 使用overflow各种方式的值(value)

潜在的、有问题的解决方法包括:

• 将字体大小更改为更大的值
• 使用模糊 padding防止图像被裁剪的值
• 使用 display: inline-block ，它有自己的一系列问题
• 使用 float: left ，也有一些尼特
• 使用<img>元素而不是 CSS，在这种情况下感觉不对
• 使用background-size我在 this answer 中找到的 CSS 属性, 尽管对此的支持参差不齐

是否有更简洁的方法来处理此问题，或者上述解决方法之一是我最好的选择？我唯一的目标是让父元素足够高以呈现整个 16x16 图像。

Answer 1

强制 LI 在顶部和底部有 2px 的填充(或顶部只有 3px)。这样做的目的是使 <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;