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

Question

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

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

<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>

Answer 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 может быть любым полезным значением, подходящим для вашего случая.

Answer 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;
}

Answer 3

используйте заполнение как

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

Answer 4

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

Или вы можете использовать background так:

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

Answer 5

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