Pourquoi Firefox n'affiche-t-il pas les images à l'aide du CSS `content: url()` ?

Firefox n'affiche pas l'image déclarée à l'aide de l'URL de contenu

Dans le contexte du style CSS, la propriété content est utilisée pour ajouter du contenu avant ou après un élément. Cependant, un problème courant survient lors de l'utilisation de la propriété content pour afficher une image dans Firefox alors qu'elle fonctionne de manière transparente dans d'autres navigateurs comme Google Chrome.

Considérez la classe CSS suivante utilisée pour ajouter une image à un élément :

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

Lorsque cette classe est appliquée à un élément, l'image ne s'affiche pas dans Firefox. Pour résoudre ce problème, il est nécessaire d'utiliser la propriété content en conjonction avec les pseudo-éléments ::before ou ::after. En encapsulant la déclaration d'image dans un pseudo-élément ::before, Firefox affichera correctement l'image.

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

Il est important de noter que dans IE8, la propriété content ne sera prise en charge que si un !DOCTYPE est précisé.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!