Mengapa Firefox Tidak Memaparkan Imej Menggunakan Harta `kandungan` CSS?

Pelayar Firefox Gagal Memaparkan Imej Menggunakan Ciri Kandungan CSS

Dalam bidang pembangunan web, keserasian merentas penyemak imbas adalah yang terpenting. Walaupun sifat CSS mungkin dipaparkan dengan sempurna pada penyemak imbas tertentu, percanggahan boleh timbul pada pelayar lain. Satu contoh ialah sifat kandungan, yang berfungsi sebagai bekas untuk pelbagai elemen, seperti imej.

Untuk menggambarkan isu ini, mari kita pertimbangkan kelas CSS berikut:

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

Apabila digunakan pada Pelayar Google Chrome dan Safari, CSS di atas berjaya memaparkan imej daripada URL yang ditentukan. Walau bagaimanapun, apabila diakses melalui penyemak imbas Firefox, imej gagal dipaparkan.

Menyelidiki Punca Punca

Percanggahan antara penyemak imbas timbul disebabkan oleh tafsiran yang berbeza bagi harta kandungan. Walaupun Google Chrome dan Safari menyokong penggunaan kandungan dengan rujukan URL, Firefox memerlukan sintaks yang lebih khusus.

Penyelesaian: Menggunakan Elemen Pseudo

Untuk menyelesaikan isu ini dan memastikan keserasian merentas pelayar, kami boleh menggunakan elemen pseudo ::before untuk mengubah suai kandungan elemen sebelum kandungan sebenar. Dalam kes ini, CSS ialah:

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

Dengan menggunakan elemen pseudo ::before, kami secara eksplisit menyatakan bahawa kandungan harus disuntik sebelum kandungan sebenar kelas .googlePic, dengan itu memastikan betul pemaparan imej dalam Firefox.

Tambahan Pertimbangan

Adalah penting untuk ambil perhatian bahawa, sementara penyelesaian kami menangani isu keserasian merentas penyemak imbas, terdapat beberapa perkara tambahan yang perlu dipertimbangkan:

• Harta kandungan hanya disokong oleh pelayar moden. Penyemak imbas lama seperti Internet Explorer 8 (IE8) memerlukan pengisytiharan DOCTYPE agar sifat kandungan berfungsi.
• URL yang disediakan dalam kod contoh hendaklah digantikan dengan laluan sebenar ke imej yang ingin anda paparkan.

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