web-dev-qa-db-fra.com

L'URL de contenu n'affiche pas d'image sur le navigateur Firefox

.googlePic{
    content: url('../../img/googlePlusIcon.PNG');
    margin-top: -6.5%;
    padding-right: 53px;
    float:right;
    height: 19px;

}

Ceci est un exemple de ma classe googlePic dans mon fichier css. Cela fonctionne et s'imprime bien sur google chrome et safari. cependant, cela ne fonctionne pas sur firefox. Nth est imprimé. S'il vous plaît, aidez :)

cssfirefox
30
user2625152

La propriété content fonctionne avec ::before et ::after.

googlePic::before
{
 content: url('../../img/googlePlusIcon.PNG');
}

Lisez ceci: http://www.htmldog.com/reference/cssproperties/content/

IE8 ne prend en charge la propriété content que si un! DOCTYPE est spécifié.

30
Mohammad Mahdi Naderi

Je sais que cela peut être une réponse tardive, mais je suis tombé sur le même problème.

Je l'ai recherché et d'une certaine manière, une URL n'est pas un type de "contenu" valide et même tho Chrome et Safari sont les bons gars et le montrent bien).

Ce qui a fonctionné pour moi, c'était de créer un "contenu" vide et d'utiliser un arrière-plan pour montrer l'image: cela fonctionne bien dans Chrome, Firefox, Safari et IE8 + 9

.googlePic:before {
    content: '';
    background: url('../../img/googlePlusIcon.PNG');
    margin-top: -6.5%;
    padding-right: 53px;
    float:right;
    height: 19px;
}

edit: oublié de mettre le: avant après le nom de classe

18
0MBB0

vous devez écrire deux classes css avec style

.googlePic
{  /*this for crome browser*/
    content: url('../../img/googlePlusIcon.PNG');
    margin-top: -6.5%;
    padding-right: 53px;
    float:right;
    height: 19px;

}

.googlePic: after
{  /*this for firefox browser*/
    content: url('../../img/googlePlusIcon.PNG');
    margin-top: -6.5%;
    padding-right: 53px;
    float:right;
    height: 19px;

}

et ses travaux pour moi :)

15
DropAndTrap

La meilleure façon de gérer les images dans tous les navigateurs Web est d'utiliser la propriété background css avec la taille d'arrière-plan. Cependant, IE8 et la version inférieure ne le prendront pas en charge (représentent 2% du spectateur en 2014)

.googlePic{
    background: url('../../img/googlePlusIcon.PNG') -6.5% 53px no-repeat;
    background-size: contain;
    float:right;
    height: 19px;
}
4
Romain

Cela m'a sauvé. N'oubliez pas de supprimer l'attribut alt du img ou vous trouverez le alt et l'image réelle dans Firefox.

   .googlePic, .googlePic:after{
        content: url('../../img/googlePlusIcon.PNG');
        margin-top: -6.5%;
        padding-right: 53px;
        float:right;
        height: 19px;
    }
1
SrAxi

Je suis tombé sur le même problème, dans mon cas, je n'ai pas pu afficher l'image en utilisant le contenu: url (). Je voulais afficher le gif en attente dans une div. Je ne connais pas les détails du support de Mozilla. Mais il est résolu dans mon cas par le code suivant.

background-img property with background-size: contain(compulsory)
.img_div{background-image: url("wait.gif");height: 20px;width: 20px;background-size: contain;border:none;}

Il fonctionne sur Chrome 73 et Firefox 66.

0
user11346384

J'ai eu le même problème récemment et aucune des solutions ci-dessus n'a fonctionné pour moi. J'ai eu recours à la solution de contournement suivante.

J'ai inclus Bootstrap dans mes projets et utilisé sa classe img-responsive . Après cela, j'inclus simplement l'image en utilisant le <img class="img-responsive"> tag. Il affiche et évolue magnifiquement sur tous les navigateurs et toutes les tailles de fenêtres.

J'espère que cela sera utile à quelqu'un.

0
ArtforLife