Значки CSS с некоторым семантическим текстом, проблемы совместимости браузера

Question

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

Markup:

<span class="icon ok">OK</span>

CSS:

.icon { display:block; width:16px; height:16px; padding-left:40px; overflow:hidden; background:transparent url(sprite.png) 0px 0px no-repeat; }
.ok { background-position: -16px 0px; }

Сам спрайт работает нормально в любом браузере, но текст почему-то отображается в Opera и Chrome, потому что заполнение в сочетании с переполнением: скрытый не будет работать, как предполагалось.

Есть идеи, как это можно улучшить? Заранее спасибо ....

Answer 1

Стандартный способ скрыть изображения, сдвинув их вне поля зрения, - это использовать text-indent:-9999em или что-то подобное.Он должен быть действительно большим для Opera, и ems работают хорошо, так как они будут масштабироваться при любом изменении размера шрифта.Также неплохо установить line-height:0; font-size:0;, т. Е. Иногда хочется добавить дополнительное место.Вам не нужно использовать отступы, чтобы скрыть текст, если вы используете text-indent.

Answer 2

Попробуйте вместо этого использовать отрицательный текстовый отступ.

.icon { display:block; width:16px; height:16px; text-indent: -9999px; background:transparent url(sprite.png) 0px 0px no-repeat; }

Answer 3

Я не знаю, нужна ли вам просто иконка (коробка 16х16) или иконка с описательным текстом.В любом случае, если вам нужна коробка размером 16x16, вы можете скрыть текст просто

.icon { display:block; width:16px; height:16px; background:transparent url(sprite.png) 0px 0px no-repeat; text-indent:-9999px; }