Какую HTML разметку вы используете для безпроблемного использования css-спрайтов? Особенно, если спрайт создается каким либо автоматизированным инструментом (spritesmith и т.п.)
Насколько я понимаю, в основном люди используют
Затем в css для .icon i {...} задается фиксированный размер и спрайт фоном. При этом можно быть уверенным, что рядом стоящие изображения в спрайте не вылезут там, где не нужно.
Вполне нормальный способ, только не совсем семантичный. В идеале было бы
<a href="#" class="icon">Какой-то текст</a>
а изображения в спрайте просто разносить подальше друг от друга. Проблема здесь в том, что в какой-то момент текста в элементе может стать много и вылезет соседнее изображение из спрайта. А также, по всей видимости, теряется возможность автоматизации.
Возможно я чего-то не знаю? Какую разметку используете вы?