Фоновое изображение не отображается в теге span

У меня возникают проблемы с тегом span, показывающим фоновое изображение в последнем FF на окнах 7. Кажется, что он работает и показывает все в более ранних версиях FF, Chrome, Safari и IE, но карманные устройства и окна 7, похоже, не работают.

Извините, если это кажется расплывчатым, я просто не могу понять это, изображения были изначально pngs без указанной высоты и ive, так как сделали их gifs и применили высоту.

<span class="design">Design Viz</span>
<style>
.design  {
    background:url(_includes/images/agenda-design.gif) no-repeat top left;
    display: inline-block;
    height: 17px;
    padding-left:25px;
}
</style>

Ответы

Ответ 1

Свойство CSS-образа background-image помещает только изображение в качестве фона. Ширина и высота объекта всегда определяются либо статическими настройками с помощью CSS/встроенного стиля, либо фактическим размером содержимого, отображаемого в нем. В вашем случае, так как вы не добавили никакого контента между вашими тегами, его размеры x/y будут равны 0, но нет фона с фоном. Он там, только вы не можете его увидеть, если вы не определите (каким-то образом) размер элемента.

<span class="design">Design Viz</span>
.design  {
padding-left:25px;
background:url(_includes/images/agenda-design.gif) no-repeat top left;
display: inline-block;
height: 17px;
width: 50px;
}

Где 50 может быть любым полезным значением, подходящим для вашего случая.

Ответ 2

дисплей: встроенный блок; не поддерживается IE7. Вы можете исправить это, добавив:

.design  {
    padding-left:25px;
    background:url(_includes/images/agenda-design.gif) no-repeat top left;
    display: inline-block;
    height: 17px;
    width: 50px;
    zoom: 1;
    *display:inline;
}

Ответ 3

Вы не можете устанавливать атрибуты no-repeat top left, если вы объявляете фоновое изображение. В background-image вы должны установить ссылку только на свое изображение.

Или вы можете использовать background следующим образом:

background: url(...) no-repeat top left

Ответ 4

используйте дополнение, например

 padding-left:25px;
    padding-top: 6px;
    padding-bottom: 10px;
    padding-right: 5px;

Ответ 5

Добавьте ширину: 17px к вашему стилю css (или независимо от его ширины)