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

请注意，实际上我不会以像素为单位对字体大小进行硬编码。它们最终被渲染为 13 像素高。我已经硬编码了这里的值来重现问题。

以下似乎都不起作用：

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

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

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

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

4

1 回答 1

3

强制 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;
于 2013-04-01T20:45:43.780 回答