Нужно ли мне дополнять изображения в CSS Sprite?

Question

В CSS Sprites вы часто найдете отступы между каждым изображением. Я считаю, что идея заключается в том, чтобы при изменении размера страницы одно изображение не переходило в другое.

Я думаю, это зависит от разных типов увеличения браузера (лучше всего объяснил Джефф) .

Однако мне не удалось увидеть это поведение в моих тестах. Это проблема только со старыми браузерами? (Я не смог протестировать с IE6 в настоящее время, поэтому я считаю это «старым»).

Должен ли я все еще беспокоиться об уходе из космоса? Своего рода боль.

Например:

CSS Sprite, который я нашел для AOL, имеет отступ между каждым изображением: ПРОСМОТР

но The Daily Show решила не беспокоить: ПРОСМОТР

Answer 1

Это не должно * дополняться , но при увеличении, особенно в IE8 (бета-версия больше, чем RC), при отсутствии заполнения происходит кровотечение изображения.

Лучший пример - перейти на Google.com -> Поиск и масштабирование ... вы увидите «подчеркивания» в правом нижнем углу изображения, когда масштабирование округляется вверх / вниз.

Теоретически, отступ в 1 пиксель со всех сторон спрайта должен быть в порядке.

Вот спрайт от Google (изображения) ...

Но при увеличении значки +, -, x перетекают в основной логотип Google.

Answer 2

В основном ответ - да. Через два года после того, как я задал этот вопрос, появится релиз IE9. IE9 имеет такую ​​же проблему - если не больше, чем любой другой браузер ...

Это довольно бесит, потому что это так просто исправить.

С ростом доли iPad на рынке - очень важно иметь хотя бы наполовину приличный опыт масштабирования неоднородных сумм.

Я собираюсь поместить одну пиксельную рамку вокруг каждого изображения, чтобы соответствовать цвету фона соседнего элемента (потенциально различного с каждой стороны). К счастью, я автоматически генерирую все свои csssprites на основе файла .xml - так что я могу сделать это программно без особых проблем. Это все еще огромная боль ...

Answer 3

Саймон - Мой опыт показывает, что это, безусловно, проблема.

В ответ на ваш второй вопрос, почему бы не использовать прозрачную прокладку? (Возможно, вы все еще поддерживаете ie6, и это нетривиально, в таком случае, мне очень жаль).

Answer 4

Говоря о старых браузерах (использующих масштабирование текста), вам не всегда требуется заполнение.

Основное различие между вашими двумя примерами состоит в том, что спрайт Daily Show уже включает текст пункта меню в само изображение.

При использовании масштабирования текста элементы меню AOL могут растягиваться вертикально из-за большего размера шрифта, а текст меню может даже переноситься на две строки. Чтобы приспособиться к таким случаям, эти значки должны быть немного дополнены, чтобы они не кровоточили. Как правило, вы просто пытаетесь убедиться, что он не кровоточит ни на одном из пяти размеров текста IE6.

Поскольку меню ежедневного шоу не содержит (видимого) текста HTML, его размер не будет зависеть от увеличения текста (хотя вам может понадобиться line-height: 0; или около того), поэтому он не нужен любая обивка.

Как уже показывалось scunliffe , браузерам, использующим масштабирование страницы, могут понадобиться спрайты для небольшого заполнения из-за ошибок округления.