Affichage des images avec URL de contenu dans Firefox

Un problème a été rencontré lorsque certains navigateurs, spécifiquement Firefox, n'affichent pas des images lors de leur référence à l'aide de la propriété de contenu. Cela peut être vu dans la classe CSS fournie:

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

Bien que ce CSS fonctionne comme prévu dans Google Chrome et Safari, il ne parvient pas à rendre une image dans Firefox.

Solution:

La propriété du contenu ne peut être utilisée qu'avec des pseudo-éléments tels que: avant et: après. Pour résoudre le problème, nous devons modifier notre classe CSS comme suit:

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

Explication:

La propriété de contenu fonctionne en insérant du contenu avant ou après un élément. En utilisant :: avant, nous insérons l'image avant l'élément .googlepic, qui permet à Firefox de l'afficher correctement. Article:

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