Mengapa Firefox Tidak Memaparkan Imej Menggunakan CSS `content: url()`?

Firefox Tidak Memaparkan Imej Diisytiharkan Menggunakan URL kandungan

Dalam konteks penggayaan CSS, sifat kandungan digunakan untuk menambah kandungan sebelum atau selepas sesuatu unsur. Walau bagaimanapun, isu biasa timbul apabila menggunakan sifat kandungan untuk memaparkan imej dalam Firefox semasa ia berfungsi dengan lancar dalam penyemak imbas lain seperti Google Chrome.

Pertimbangkan kelas CSS berikut digunakan untuk menambah imej pada elemen:

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

Apabila kelas ini digunakan pada elemen, imej tidak dipaparkan dalam Firefox. Untuk menyelesaikan isu ini, anda perlu menggunakan sifat kandungan bersama sama ada ::before atau ::after pseudo-elements. Dengan membalut pengisytiharan imej dalam ::sebelum unsur pseudo, Firefox akan memaparkan imej dengan betul.

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

Perlu ambil perhatian bahawa dalam IE8, sifat kandungan hanya akan disokong jika !DOCTYPE adalah dinyatakan.

Atas ialah kandungan terperinci Mengapa Firefox Tidak Memaparkan Imej Menggunakan CSS `content: url()`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!