Вопросы Теги

Должны ли изображения CSS Sprite иметь пространство X между каждым элементом?

У меня проблема, какое-то время я пытался понять, как решить эту проблему. Я очень подробно опишу это ниже ...

Я пытаюсь использовать изображение в качестве изображения спрайта для списка UL. Он должен показать значок с текстом рядом с ним, и значок, и текст должны куда-то ссылаться.

Мой первый пример выглядит таким, каким я хочу его видеть. Когда размер шрифта установлен на 10 пикселей , все выглядит нормально ... sprite ok

Как только я изменю размер шрифта с 10 пикселей на 16 пикселей ...

sprite not ok

Вот 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

Примеры JSFiddle

Это первый пример с размером шрифта : 10 пикселей http://jsfiddle.net/jasondavis/Mt87G/4/

Это MESSED UP с font-size: 16px http://jsfiddle.net/jasondavis/Mt87G/5/

Помогите мне?

Хорошо, я знаю, что могу просто измените изображение спрайта так, чтобы вокруг каждого объекта на изображении были огромные пространства, и тогда вы не заметите этой проблемы, но мне бы очень хотелось решить эту проблему правильно. Я имею в виду, можно ли делать то, что я пытаюсь сделать, только с помощью CSS, или изображение должно быть разнесено? Я видел другие изображения спрайтов, где они расположены близко друг к другу, как у меня, и я видел некоторые, где все находится на расстоянии 100 пикселей друг от друга.

Пожалуйста, помогите мне, если вы знаете, как решить эту проблему. Я пробовал все, что мог придумать, но безуспешно. Мне нужно делать это в массовом порядке, поэтому я хотел бы сделать это правильно сейчас, прежде чем я это сделаю. Спасибо за любую помощь

11
задан JasonDavis 17 November 2011 в 14:19
поделиться