Seringkali ada banyak masalah ketidakcocokan antara IE dan FF dalam tata letak halaman web CSS. Berikut beberapa kemungkinan umum dan solusinya!
1. Gunakan !important untuk mengatasi perbedaan tata letak antara IE dan Mozilla !important adalah sintaks yang didefinisikan dalam CSS1. Fungsinya adalah untuk meningkatkan prioritas aplikasi aturan gaya yang ditentukan. Hal yang paling penting adalah IE tidak pernah mendukung sintaks ini, tetapi browser lain mendukungnya. Oleh karena itu, kita dapat menggunakan ini untuk mendefinisikan gaya yang berbeda untuk IE dan browser lainnya. Misalnya, kita mendefinisikan gaya seperti ini:
Contoh Kode Sumber
[www.downcodes.com] .tes warna{
border:20pxsolid#60A179!penting;
batas:20pxpadat#00F;
bantalan:30 piksel;
lebar:300 piksel;
}
Saat browsing di Mozilla dapat memahami prioritas !important, sehingga ditampilkan warna #60A179; saat browsing di IE, tidak dapat memahami prioritas !important, sehingga ditampilkan warna #00F.
2. Mengatasi masalah gaya hover tidak ditampilkan setelah hyperlink diakses. Ubah urutan properti CSS: Standar urutannya harus:
a:link—a:dikunjungi—a:hover—a:aktif
3. Cara menampilkan konten dalam Li dengan elips setelah melebihi panjangnya Contoh Kode Sumber
[www.downcodes.com] <meta content="text/html; charset=gb2312" http-equiv="Jenis Konten" />
<gaya tipe="teks/css">
<!--
li {
lebar:200 piksel;
spasi putih:nowrap;
luapan teks: elipsis;
-o-text-overflow:elipsis;
meluap: tersembunyi;}
--></gaya>
<ul>
<li><a href="#">Desain Web CSS Saya menyukai Standardisasi CSS-Web - www.52CSS.com</a></li>
<li><a href="#">FAQ standar web - www.downcodes.com</a></li>
</ul>
margin:3px - berarti semua sisinya berukuran 3px;
margin:3px 5px - artinya nilai atas dan bawah adalah 3px, dan nilai kanan dan kiri adalah 5px
margin:3px 5px 7px—menunjukkan nilai atas adalah 3, nilai kanan dan kiri adalah 5, dan nilai bawah adalah 7
margin: 3px 5px 7px 5px - empat nilai mewakili atas, kanan, bawah, kiri;
5. Selesaikan masalah IE yang tidak dapat menampilkan PNG transparan dengan benar - tambahkan kode di header Contoh Kode Sumber
[www.downcodes.com] <skrip bahasa="javascript">
fungsi benarPNG()
{
for(var i=0; i<dokumen.gambar.panjang; i++)
{
var img = dokumen.gambar[i]
var imgNama = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "kelas='" + img.className + "' " : ""
var imgJudul = (img.judul) ? "judul='" + img.judul + "' " : "judul='" + img.alt + "' "
var imgStyle = "tampilan: blok sebaris;" + img.style.cssText
if (img.align == "kiri") imgStyle = "float:kiri;" + imgStyle
if (img.align == "kanan") imgStyle = "float:kanan;" + imgStyle
if (img.parentElement.href) imgStyle = "kursor:tangan;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style="" + "lebar:" + img.lebar + "px; tinggi:" + img.tinggi + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src='" + img.src + "', sizingMethod='scale');"></span>"
img.outerHTML = strNewHTML
saya = saya-1
}
}
}
window.attachEvent("onload", benarPNG);
</skrip>
Gunakan (padding:0; margin:0; gaya daftar:di dalam;)
Atau (padding:0; margin:0; list-style:none;) untuk mencapai kompatibilitas
7. Solusi untuk perbedaan 2px dalam interpretasi model BOX di Firefox dan IE Contoh Kode Sumber
[www.downcodes.com] div{
margin:30px!penting;
margin:28 piksel;
}
Perhatikan bahwa urutan kedua margin ini tidak boleh dibalik. Menurut yang disebutkan di atas IE tidak mendukung !important, jadi sebenarnya diartikan seperti ini di bawah IE:
Contoh Kode Sumber
[www.downcodes.com] div{
marin:30 piksel;
margin:28 piksel
}
Jika ada definisi yang berulang maka definisi terakhir akan dieksekusi, jadi Anda tidak bisa hanya menulis margin:XXpx!important;
8. Efek default margin Konten div dipusatkan secara default di IE, dan rata kiri di FF secara default. Cara memusatkan konten ff adalah dengan menambahkan kode margin:auto;
