Warum zeigt Firefox Bilder nicht mit CSS „content: url()' an?

Firefox zeigt kein mit Inhalts-URL deklariertes Bild an

Im Kontext des CSS-Stils wird die Inhaltseigenschaft verwendet, um Inhalte vorher oder nachher hinzuzufügen ein Element. Allerdings tritt ein häufiges Problem auf, wenn die Content-Eigenschaft zum Anzeigen eines Bildes in Firefox verwendet wird, während sie in anderen Browsern wie Google Chrome nahtlos funktioniert.

Bedenken Sie die folgende CSS-Klasse, die zum Hinzufügen eines Bildes zu einem Element verwendet wird:

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

Wenn diese Klasse auf ein Element angewendet wird, wird das Bild nicht in Firefox angezeigt. Um dieses Problem zu beheben, ist es notwendig, die Content-Eigenschaft in Verbindung mit den Pseudoelementen ::before oder ::after zu verwenden. Durch das Umschließen der Bilddeklaration in ein ::before-Pseudoelement zeigt Firefox das Bild korrekt an.

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

Es ist wichtig zu beachten, dass in IE8 die Inhaltseigenschaft nur unterstützt wird, wenn ein !DOCTYPE vorhanden ist angegeben.

Das obige ist der detaillierte Inhalt vonWarum zeigt Firefox Bilder nicht mit CSS „content: url()' an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!