Karena saya memiliki beberapa keterampilan produksi halaman web, saya sudah lama mendengar bahwa file PNG tembus pandang akan mengalami masalah tampilan di IE6, tetapi karena saya belum pernah memiliki situs web sendiri, saya belum pernah benar-benar menemukannya.
Saya mulai membangun situs web saya sendiri pada awal tahun ini. Saya menggunakan gambar png dengan bagian transparan untuk membuat LOGO situs web. Saya pikir itu sudah cukup tua dan tidak perlu mempertimbangkan IE6. Suatu hari ketika saya pulang kerja dan membuka backend Google Analytics, saya menemukan bahwa kunjungan IE6 sebenarnya menyumbang 40% dari total kunjungan. Saya terkejut dan segera mengunduh IE6 versi hijau dari Internet untuk menguji situs web saya Seperti yang diharapkan, LOGOnya benar-benar buram.
Jadi saya mencari solusi secara online sepanjang malam. Secara umum, metode online relatif rumit, termasuk filter css, js, penggantian gif, dll. Tapi saya selalu merasa itu kurang indah. Akhirnya setelah semalaman mencari, saya menemukan metode yang hanya membutuhkan 2 kalimat kode js untuk menyelesaikan masalah dengan lancar. Mari kita bagikan dengan Anda selanjutnya
Pertama, unduh iepng.js dari situs web saya
http: //www.*** .com/templates/default/js/iepng.js
Jika ID elemen situs web Anda yang menggunakan png semi-transparan sebagai latar belakang adalah logo, tambahkan kode berikut di antara <head></head>:
| <!-- untuk perbaikan png ie6 --> <skrip type="text/javascript" src="templates/js/iepng.js"></script> <skrip tipe=teks/javascript> EvPNG.fix('#logo');</skrip> |
Terakhir, izinkan saya menjelaskan, jika Anda menggunakan png transparan sebagai latar belakang div id foo, maka harus ditulis sebagai:
| EvPNG.memperbaiki('#foo'); |
Jika Anda menggunakan png transparan sebagai latar belakang bilah kelas div, maka itu harus ditulis sebagai:
| EvPNG.memperbaiki('.bar"); |
Sintaksnya sama dengan CSS, oke. Saya berharap dapat terus bertukar keterampilan membangun situs web dengan Anda.
Artikel ini awalnya dibuat oleh Wang Zai, webmaster Tianniu.com (www.hers99.com). Harap sebutkan sumbernya saat mencetak ulang.