web-dev-qa-db-fra.com

L'image d'arrière-plan n'apparaît pas dans la balise span

J'ai des problèmes avec une balise span affichant une image d'arrière-plan dans le dernier FF sous Windows 7 . Elle semble fonctionner et tout montrer correctement dans les versions antérieures de FF, Chrome, Safari et IE, mais avec les périphériques de poche et Windows 7 it semble échouer.

Désolé si cela semble vague, je ne peux tout simplement pas le comprendre, les images étaient à l’origine des pngs sans hauteur spécifiée et ive depuis les ont créés gifs et appliqués une hauteur.

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

La propriété CSS background-image met uniquement une image en tant qu'arrière-plan. La largeur et la hauteur d'un objet sont toujours définies soit par des paramètres statiques via un style CSS/inline, soit par la taille réelle du contenu qui y est affiché . Dans votre cas, puisque vous n'avez ajouté aucun contenu entre vos tags , ses dimensions x/y seront égales à 0, mais il n’ya pas de problème avec l’arrière-plan. C'est là, vous ne pouvez le voir que si vous définissez (d'une manière ou d'une autre) une taille pour l'élément.

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

Où 50 peut être une valeur utile adaptée à votre cas.

51
Victor Nițu

affichage: inline-block; n'est pas supporté par IE7. Vous pouvez le réparer en ajoutant:

.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

Vous ne pouvez pas définir d'attributs no-repeat top left si vous déclarez image d'arrière-plan. Dans background-image, vous devez uniquement définir le lien vers votre image.

Ou vous pouvez utiliser background comme ceci:

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

utiliser un rembourrage comme 

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