Question

我正在通过CSS使用背景图片来设计我网站上的一些元素。我在Chrome和IE浏览器中看到的问题是，当线条的线条高度小于图像高度时，图像会被裁剪。展示此问题的Here's a fiddle（再次通过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;
}

请注意，实际上我并没有硬编码字体大小（以像素为单位）;它们最终被渲染为13像素高。我在这里对这个值进行了硬编码以重现问题。

以下任何一项似乎都不起作用：

在各种元素（甚至是父元素）上设置height，line-height或min-height
以各种方式使用overflow值

潜在的，有问题的解决方法包括：

将字体大小更改为更大的
使用模糊的padding值来防止图像被剪裁
使用display: inline-block，其中包含一系列问题
使用float: left，也有一些尼特
使用<img>元素代替CSS，在这种情况下感觉不对
使用我在this answer中找到的background-size 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;

如何“包含”背景图像？

1 个答案: