it-swarm.com.ru

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

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

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

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

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

51
Victor Nițu

дисплей: встроенный блок; не поддерживается 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;
}
1
GDW

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

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

background: url(...) no-repeat top left
0
Edmund Lee

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

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