如何「包含」背景圖片？

Question

我通過CSS使用背景圖像來設計我網站上的一些元素。我在Chrome和IE中看到的問題是，當線條的線高小於圖像高時，圖像會被裁剪。 Here's a fiddle演示問題（再次，查看此與Chrome或IE瀏覽器，看看問題;火狐呈現的東西，因爲我想），這裏是從上述小提琴相應的代碼：

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，感覺錯在這種情況下
• 使用background-size CSS屬性我this answer發現，雖然這種支持是參差不齊

有沒有更好的方法來處理這個問題，還是上述解決方法之一是我最好的選擇？我唯一的目標是讓父元素足夠高以呈現整個16x16圖像。

Answer 1

強制LI的頂部和底部填充2px（或頂部只有3px）。這一點的目的是使<li>的高度等於或大於圖像的高度，即16px。你的字體大小是13px，所以3px填充到頂部= 16px，或者2px到top和bottom = 17px，這也是可行的。這是最好的方式，因爲它是一種「最佳做法」。

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

padding: 2px 0; 

OR，調整background-position:

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

background-position: 2px 0px;