У меня проблема, какое-то время я пытался понять, как решить эту проблему. Я очень хорошо опишу это ниже...
Я пытаюсь использовать изображение в качестве изображения спрайта для списка UL. Он должен отображать значок с текстом рядом с ним, и значок, и текст должны куда-то ссылаться.
Мой первый пример выглядит так, как я хочу. Когда font-size установлено на 10px, все выглядит нормально... 
Как только я изменю font-size с 10px на 16px...
Вот CSS и HTML
CSS
#post-meta-wrapper{
list-style: none;
margin:20px 0 20px 20px;
width:400px;
}
#post-meta-wrapper li {
width:100%;
color: #44495B;
border-top: 1px dotted #CCC;
color: #999;
font-size: 10px;
line-height: 28px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-indent: 0px;
}
#post-meta-wrapper li a{
background: url(http://i.imgur.com/Bcps8.png) no-repeat 0px -183px;
padding-left:15px;
}
#post-meta-wrapper .meta-img {
background:#fff;
width: 15px;
height: 10px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 8px;
overflow: hidden;
}
#post-meta-wrapper a:hover,
#post-meta-wrapper .active{
background: url(http://i.imgur.com/Bcps8.png) no-repeat 0px -195px;
width: 15px;
height: 10px;
}
HTML
<ul id="post-meta-wrapper">
<li class="author">
<a href="#"><span class="meta-img">Test link</a>
</li>
<li class="author">
<a href="#" class="active"><span class="meta-img">Test link</a>
</li>
<li class="author">
<a href="#"><span class="meta-img">Test link</a>
</li>
<li class="author">
<a href="#"><span class="meta-img">Test link</a>
</li>
<li class="author">
<a href="#"><span class="meta-img">Test link</a>
</li>
<li class="author">
<a href="#"><span class="meta-img">Test link</a>
</li>
</ul>
Примеры JSFiddle
Это первый файл с font-size: 10px http://jsfiddle.net/jasondavis/Mt87G/4/
Это СБОЙ с font-size: 16px http://jsfiddle.net/jasondavis/Mt87G/5/< /а>
Помоги мне?
Хорошо, я знаю, что могу просто изменить изображение спрайта, чтобы вокруг каждого объекта на изображении были огромные пространства, и тогда вы не заметили бы эту проблему, но я действительно хотел бы решить эту проблему правильно. Я имею в виду, возможно ли сделать то, что я пытаюсь сделать, только с помощью CSS или изображение должно быть разнесено? Я видел другие изображения спрайтов, где они расположены близко друг к другу, как у меня, и я видел некоторые, где все находится на расстоянии около 100 пикселей друг от друга.
Пожалуйста, помогите мне, если вы знаете, как решить эту проблему, я пробовал все, что мог придумать, но пока безуспешно. Мне нужно сделать это в массовом масштабе, поэтому я хотел бы сделать это правильно сейчас, прежде чем я это сделаю. Спасибо за любую помощь
