1. Interpretasi yang berbeda dari juru bahasa kotak. #box{
lebar:600px; //untuk ie6.0-
lebar:500px; //untuk ff+ie6.0
}
#kotak{
lebar:600px!penting //untuk ff
lebar:600px; //untuk ff+ie6.0
lebar :500px; //untuk ie6.0-
}
2. Untuk menyembunyikan css di IE, gunakan sub-selektor
html>body #box{ }
3, hanya dikenali oleh IE
*html #kotak{ }
4. Valid di ie/win tetapi tersembunyi di ie/max, gunakan garis miring terbalik
5. Tentukan gaya secara terpisah untuk mis
6. Jarak ganda yang dihasilkan oleh floating ie
#kotak{
mengapung:kiri;
lebar:100 piksel;
margin:0 0 0 100px; //Dalam hal ini, IE akan menghasilkan jarak 200px
display:inline; //Abaikan float
}
Mari kita bahas dua elemen block dan inline secara detail di sini. Karakteristik elemen Block adalah: selalu dimulai pada baris baru, dan tinggi, lebar, tinggi garis, dan margin semuanya dapat dikontrol (elemen blok); ciri-ciri elemen Inline adalah: dan Elemen lainnya berada pada satu baris,... tidak dapat dikontrol (elemen inline);
#kotak{
display:block; //Dapat mensimulasikan elemen inline sebagai elemen blok
display:inline; //Mencapai efek penataan pada baris yang sama
diplay:table; //untuk ff, simulasikan efek tabel
}
7, hanya untuk oprea
@media semua dan (lebar minimum:0px){
#kotak{ }
}
8. Masalah dengan IE dan lebar dan tinggi
IE tidak mengenal definisi min-, tetapi sebenarnya memperlakukan lebar dan tinggi normal seolah-olah ada min. Ini akan menjadi masalah besar. Jika Anda hanya menggunakan lebar dan tinggi,
Kedua nilai ini tidak akan berubah di browser normal. Jika Anda hanya menggunakan min-width dan min-height, berarti lebar dan tinggi tidak disetel sama sekali di IE.
Misalnya, jika Anda ingin menyetel gambar latar belakang, lebar ini lebih penting. Untuk mengatasi masalah ini, Anda dapat melakukan ini:
#box{
lebar: 80 piksel;
tinggi: 35 piksel;
}
html>badan #kotak{
lebar: otomatis;
tinggi: otomatis;
lebar minimum: 80 piksel;
tinggi minimum: 35 piksel;
}
9. Lebar minimum halaman,
min-width, adalah perintah CSS yang sangat berguna. Perintah ini dapat menentukan bahwa lebar minimum elemen tidak boleh kurang dari lebar tertentu, untuk memastikan bahwa pengaturan huruf selalu benar. Namun IE tidak mengenali hal ini, dan sebenarnya memperlakukan lebar sebagai lebar minimum. Untuk membuat perintah ini juga tersedia di IE, Anda dapat meletakkannya di bawah tag <body>, lalu menentukan kelas untuk div. CSS dirancang seperti ini:
#container{
lebar minimum: 600 piksel;
lebar:ekspresi(document.body.clientWidth < 600? "600px": "auto" );
}
Lebar minimum pertama adalah normal; tetapi lebar pada baris kedua menggunakan Javascript, yang hanya dikenali oleh IE, yang juga akan membuat dokumen HTML Anda kurang formal. Ini sebenarnya mengimplementasikan lebar minimum melalui penilaian Javascript.
Metode yang sama juga dapat digunakan untuk mencapai lebar maksimum untuk IE:
#wadah
{
lebar minimum: 600 piksel;
lebar maksimal: 1200 piksel;
lebar:ekspresi(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto";
}
10, pelampung bening
.kotak peretasan{
display:table; //Menampilkan objek sebagai tabel tingkat elemen blok
}
atau
.kotak peretasan{
jelas: keduanya;
}
Atau tambahkan: after (objek semu) untuk mengatur konten yang muncul setelah objek. Biasanya digunakan bersama dengan konten. IE tidak mendukung objek semu ini dan tidak didukung oleh browser Ie, sehingga tidak mempengaruhi IE/ MENANGKAN browser. ------- Ini yang paling merepotkan...
#kotak:setelah{
isi: ".";
tampilan: blok;
tinggi: 0;
jelas: keduanya;
visibilitas: tersembunyi;
}
11. Teks IE mengambang DIV menghasilkan bug 3 piksel
Objek di sebelah kiri diapungkan, dan di sebelah kanan diposisikan menggunakan margin kiri dari patch luar. Teks di dalam objek di sebelah kanan akan diberi jarak 3px dari kiri.
#kotak{
mengapung:kiri;
lebar:800 piksel;
}
#kiri{
mengapung:kiri;
lebar:50%;
}
#Kanan{
lebar:50%;
}
*html #kiri{
margin-kanan:-3px; //Kalimat ini adalah kuncinya
}
Kode HTML
12. Pemilih atribut (ini tidak dapat dianggap kompatibel, ini adalah bug dalam menyembunyikan css)
p[id]{}
div[id]{}
disembunyikan untuk versi di bawah IE6.0 dan IE6.0.
Masih ada perbedaan antara pemilih atribut dan sub-selektor yang digunakan oleh FF dan OPera. Cakupan sub-selektor dikurangi dalam bentuk Cakupan perangkat ini relatif besar. Misalnya, di p[id], semua tag p dengan id memiliki gaya yang sama.