Mengapa Imej Saya Tidak Dipaparkan dalam Firefox Apabila Menggunakan Harta `kandungan` CSS?

Isu Paparan Imej Pelayar Firefox

Dalam percubaan untuk memaparkan imej dalam kelas CSS, sifat kandungan telah digunakan:

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

Walaupun pendekatan ini terbukti berkesan dalam memaparkan imej pada Google Chrome dan Safari, masalah yang tidak dijangka telah muncul dalam Firefox: imej gagal dipaparkan.

Penyelesaian:

Isunya terletak pada pelaksanaan Firefox bagi sifat kandungan, yang terutamanya serasi dengan ::before dan ::selepas unsur pseudo. Untuk membetulkan keadaan, kod CSS boleh diubah suai seperti berikut:

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

Dengan menggunakan elemen pseudo ::before, anda juga boleh memaparkan imej dalam Firefox juga. Rujuk pautan dokumentasi yang disediakan untuk mendapatkan maklumat lanjut tentang penggunaan sifat kandungan:

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

Atas ialah kandungan terperinci Mengapa Imej Saya Tidak Dipaparkan dalam Firefox Apabila Menggunakan Harta `kandungan` CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!