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

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

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

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

Должен ли я все еще беспокоиться о том, чтобы покинуть место? Это своего рода боль.

Например:

CSS Sprite, который я нашел для AOL, заполнение между каждым изображением: VIEW

но The Daily Show решила не bother: VIEW

Ответ 1

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

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

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

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

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

Ответ 2

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

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

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

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

Ответ 3

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

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

Ответ 4

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

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

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

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

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