1. CSS HACK
Dua metode berikut dapat menyelesaikan hampir semua HACK saat ini.
1. !important
Dengan dukungan IE7 untuk !important, metode !important sekarang hanya untuk HACK IE6 (Perhatikan penulisannya. Ingatlah bahwa posisi deklarasi perlu terlebih dahulu.)
2. IE6/IE77 untuk FireFox
*+html dan *html adalah tag khusus IE, yang tidak didukung oleh firefox. Dan *+html Ini adalah tag unik untuk IE7
Catatan:
*+html HACK untuk IE7 harus memastikan bahwa ada pernyataan berikut di bagian atas HTML:
http://www.w3.org/TR/html4/loose.dtd ">
2. Penutupan float universal.
Untuk prinsip clear float, silakan merujuk ke [Cara Menghapus Float Tanpa Markup Struktural].
Tambahkan kode berikut ke Global CSS dan tambahkan class="clearfix" ke div yang perlu ditutup. Ini berfungsi setiap
saat
.clearfix:setelah
{
konten:".";
tampilan:blok;
tinggi:0;
jelas
:keduanya
;
visibilitas
:
tersembunyi
;
.clearfix {tampilan:blok;}
3. Tip kompatibilitas lainnya
1. Mengatur padding pada div di bawah FF akan menyebabkan lebar dan tinggi bertambah, tetapi IE tidak (dapat diselesaikan dengan !important)
2. Masalah pemusatan
1). garis- Ketinggian diatur ke ketinggian yang sama dengan div saat ini, dan kemudian perataan vertikal: tengah. (Hati-hati jangan sampai membungkus konten.)
2). Pusatkan secara horizontal: 0 otomatis; tidak mahakuasa)
3. Jika Anda perlu menambahkan konten dalam tag a Untuk gaya atas, Anda perlu mengatur display: block; (umum dalam tag navigasi)
4. Perbedaan pemahaman BOX antara FF dan IE mengarah ke 2px perbedaan dan masalah seperti margin div yang disetel ke float dua kali lipat di bawah IE.
5. Tag ul ada di FF. Ada gaya daftar dan padding secara default di bawah. Umum dalam tag navigasi dan daftar konten)
6. Jangan atur tinggi div sebagai pembungkus eksternal. Yang terbaik adalah menambahkan overflow: tersembunyi .Untuk mencapai tingkat kemampuan beradaptasi yang
tinggi
Dan
tangan
hanya berlaku untuk IE
.
akan menyebabkan halaman tidak ditampilkan sesuai kebutuhan! Saya menemukan hack yang bagus
untuk
IE7 menggunakan "*+html". Sekarang jelajahi dengan IE7 dan seharusnya tidak ada masalah.Sekarang tulis CSS seperti ini:
#1 { color: #333; }
* html #1 { color: #666; }
*+html #1 { color: #999 }
Kemudian warna font ditampilkan sebagai #333 di firefox . Warna font adalah #666 pada IE6 dan #999 pada IE7.
2Definisi gaya utama untuk
masalah pemusatan dalam tata letak css
adalah sebagai berikut:body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto }
Deskripsi:
Pertama tentukan TEXT-ALIGN pada induknya elemen: tengah; Ini berarti bahwa konten dalam elemen induk berada di tengah;
Tapi itu tidak bisa dipusatkan di mozilla. Solusinya adalah dengan menambahkan "MARGIN-RIGHT: auto;MARGIN-LEFT: auto;" saat mengatur elemen anak.
Perlu diperhatikan bahwa jika Anda ingin menggunakan metode ini untuk memusatkan seluruh halaman, disarankan untuk tidak menyetelnya dalam DIV, Anda dapat membagi beberapa div secara berurutan,
cukup tentukan MARGIN-RIGHT: auto;MARGIN-LEFT: auto;
3 Interpretasi berbeda dari model kotak
#box{ width:600px; //untuk ie6.0- width:500px; //untuk ff+ie6.0}
#box{ width:600px!important //untuk lebar ff: 600px; //untuk ff+ie6.0 lebar :500px; //untuk ie6.0-}
4 Jarak ganda dihasilkan oleh floating yaitu
#box{ float:left:100px margin:0 0 0 100px; kind Dalam keadaan tersebut, IE akan menghasilkan jarak 200px display:inline; //Ignore the float} Mari kita
bicara tentang dua elemen block dan inline secara detail. Karakteristik elemen Block adalah: selalu dimulai pada baris baru, tinggi , lebar, tinggi garis, margin dapat dikontrol (elemen blok); ciri-ciri elemen Inline adalah: pada baris yang sama dengan elemen lainnya,... tidak dapat dikontrol (elemen inline)
; /bisa menjadi elemen sebaris Simulasikan sebagai elemen blok display:inline; //Mencapai efek penataan pada baris yang sama diplay:table;
IE tidak mengenali definisi min-, namun sebenarnya memperlakukan lebar dan tinggi normal seolah-olah ada min. Ini adalah 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, maka lebar dan tinggi tidak disetel sama sekali di bawah IE.
Misalnya, jika Anda ingin menyetel gambar latar belakang, lebar ini lebih penting. Untuk mengatasi masalah ini, Anda dapat melakukan ini:
#box{ width:
80px; height: 35px;}html>body #box{ width: auto; height: min-width: 80px;
halaman Lebar minimum
lebar minimum adalah perintah CSS yang sangat berguna. Perintah ini dapat menentukan bahwa lebar minimum suatu elemen tidak boleh kurang dari lebar tertentu, untuk memastikan bahwa tata letak selalu benar. Namun IE tidak mengenali hal ini,
dan sebenarnya memperlakukan lebar sebagai lebar minimum. Agar perintah ini berfungsi di IE, Anda dapat meletakkan
Kemudian desain CSS seperti ini:
#container{ min-width: 600px width; :expression (document.body.clientWidth < 600? "600px": "auto" );}
Min-width pertama adalah normal; tetapi lebar pada baris 2 menggunakan Javascript, yang hanya dikenali oleh IE, yang juga akan membuat Anda Dokumen HTML tidak terlalu formal. Ini sebenarnya mengimplementasikan lebar minimum melalui penilaian Javascript.
Bisa juga ditulis langsung sebagai:
#wadah{ lebar minimum:600 piksel; *lebar:600 piksel;}
Dengan cara ini, lebar minimumnya adalah 600PX terlepas dari IE atau FF.
7 Hapus
.hackbox{ display:table; //Tampilkan objek sebagai tabel tingkat elemen blok} atau .hackbox{ clear:both;}
atau tambahkan : setelah ( Objek semu), menyetel konten yang muncul setelah objek, biasanya digunakan bersama dengan konten. IE tidak mendukung objek semu ini dan tidak didukung oleh browser Ie,
sehingga tidak memengaruhi browser IE/WIN. Hal yang paling merepotkan tentang ini... #box:after{ content: "."; display: block; clear: keduanya; visibilitas: tersembunyi;}
8 DIV teks mengambang IE menghasilkan 3 piksel
Objek di sebelah kiri sisibug
mengambang, dan sisi kanan diposisikan menggunakan margin kiri patch luar. Teks di objek kanan akan berjarak 3 piksel dari sisi kiri
. kiri{ float:kiri; lebar:50 %;}#kanan{ lebar:50%;}*html #kiri{ margin-kanan:-3px; //Kalimat ini adalah kuncinya}
kode HTML
9 Pemilih atribut (ini tidak dapat dianggap kompatibel, ini adalah bug dalam menyembunyikan css)
p[id ]{}div[id]{}
Ini untuk IE6.0 dan versi di bawah IE6.0 disembunyikan.
Masih ada perbedaan antara pemilih atribut dan sub-selektor di FF dan OPera bentuk, sedangkan cakupan pemilih atribut relatif besar, seperti p Dalam [id], semua tag p dengan id memiliki gaya yang sama.
10 IE masalah petak umpet
Ketika aplikasi div rumit, ada beberapa tautan di setiap kolom, seperti DIV. Saat ini, masalah petak umpet mudah terjadi.
Beberapa konten tidak dapat ditampilkan. Ketika mouse memilih area ini, ternyata konten tersebut memang ada di halaman.
Solusi: Gunakan atribut line-height untuk #layout atau gunakan tinggi dan lebar tetap untuk #layout. Jaga struktur halaman sesederhana mungkin.
11 Ketinggian non-adaptasi
Ketinggian non-adaptasi berarti ketinggian lapisan luar tidak dapat diatur secara otomatis ketika tinggi objek lapisan dalam berubah, terutama ketika objek lapisan dalam menggunakan
margin atau paddign.
Contoh:
Konten dalam objek p
CSS: #box {background-color:#eee }
#box p {margin-top: 20px;margin - bottom: 20px; text-align:center; }
Solusi: Tambahkan 2 objek div kosong di atas dan di bawah objek P. Kode CSS: .1{height:0px;overflow:hidden;} atau tambahkan atribut border pada DIV.
Metode berikut ini merupakan metode analisis dari sudut lain:
Metode penanganan BUG browser dikompilasi (sebagian) untuk dibagikan kepada teman-teman yang menyukai desain web:
1. Tanda bintang*
IE dapat mengenali *, tetapi browser standar seperti FF tidak dapat mengenali *.
Contoh: p { warna:kuning; *warna:merah;}
Yang serupa adalah
+ tanda tambah
Hanya IE yang menjelaskan
p{warna:merah; +warna:biru}
IE menampilkan warna biru dan FF menampilkan warna merah
2.!penting
IE6 dan di bawahnya akan mengabaikan gaya ini, IE7 FF akan mendukungnya;
p{warna:merah !penting;warna:kuning;}
IE7 FF akan menampilkan IE6 merah kuning
Perhatikan di sini bahwa metode !important hanya diabaikan oleh IE6 dan di bawahnya setelah mengikuti format di atas.
3. Garis bawahi.
Versi IE6 dan di bawahnya akan menggunakan gaya ini, yang lain akan diabaikan.
p{warna:merah; _warna:biru}
4. Catatan:
p{warna:merah};
Gaya ini dapat diterapkan dan ditampilkan di IE6, namun tidak akan diproses di IE5 dan versi di bawahnya, sehingga dapat dibedakan untuk IE5/6
5. @IMPOR:
Gunakan URL di @IMPORT untuk mengimpor gaya. Penggunaan standarnya adalah dengan memasukkan nilai dalam URL dalam tanda kutip, sebagai berikut @IMPORT URL("newstyle.css"); mencapai Gaya IE4 diproses secara terpisah.
Selain itu, ada cara lain:
@ Layar IMPORT URL("noie.css");
Layar adalah opsi yang digunakan untuk menentukan jenis perangkat, layar digunakan untuk tampilan layar, dan pencetakan digunakan untuk mencetak tampilan perangkat. Namun, IE tidak mendukung metode ini, dan semua browser IE dapat membedakan antara IE dan FF.
6. Pemilih atribut: digunakan untuk memilih objek dengan atribut tertentu
rentang[kelas=kiri]{warna:biru}
span[judul]{warna:merah;}
IE6 tidak mendukungnya, tetapi berfungsi dengan baik di FF, sehingga IE dan FF dapat diproses secara terpisah.
Dalam pengembangan sebenarnya, IE dan FF seringkali perlu diproses secara terpisah. Anda dapat menggunakan kode berikut:
#isi{
warna: merah;
}
[xmlnx] #konten{
warna: biru
}
Menurut saya cara ini sangat praktis dan sering digunakan, saya rekomendasikan kepada teman-teman. Jika memerlukan penjelasan lebih detail, saya bisa mempostingnya kembali.
7. Pemilih sub-objek:
span>p{warna:merah}
IE6 juga tidak didukung, dan juga dapat digunakan untuk membedakan IE dan FF.
8. Metode Tantek
#isi{
warna: biru;
keluarga suara:""}"";
keluarga suara:mewarisi;
warna: merah;
}
Setelah menggunakan voice-family pada kode di atas, warna berikut: merah tidak akan diurai oleh browser IE5.5 dan di bawahnya. Oleh karena itu, warna teks akan tampak merah di IE6/7/FF, dan di IE5.5 dan di bawahnya akan muncul warna biru di browser;
Selain itu, ada cara lain untuk menangani keluarga suara:
#isi{
warna: merah;
keluarga suara:"}"
keluarga suara:mewarisi;
warna: biru;
}
Dengan menggunakan metode ini, teks di browser IE6 dan di bawahnya serta browser FF akan tampak merah, sedangkan teks di browser IE5 dan di bawahnya akan tampak biru!
9. Atribut melarikan diri
p{width:200px;}
IE5.5 dan di bawahnya akan diabaikan. Catatan: Karakter backslash tidak boleh muncul sebelum 0-9 atau huruf af
10. Komentar bersyarat di IE 1. Pengenalan komentar bersyarat
Komentar bersyarat di IE memiliki kemampuan luar biasa untuk membedakan versi IE dari IE dan non-IE, dan umumnya digunakan dalam desain WEB.
metode peretasan.
Komentar bersyarat hanya dapat digunakan di IE5 ke atas.
Jika Anda menginstal beberapa IE, komentar bersyarat akan didasarkan pada versi IE tertinggi.
Struktur dasar komentar kondisional sama dengan komentar HTML (). Oleh karena itu browser selain IE akan memperlakukannya sebagai komentar biasa dan mengabaikannya sepenuhnya.
IE akan menggunakan kondisi if untuk menentukan apakah akan mengurai konten dalam komentar bersyarat seperti konten halaman normal.
2. Atribut anotasi bersyarat
gt: lebih besar dari, pilih versi bersyarat atau lebih tinggi, tidak termasuk versi bersyarat
lt: kurang dari, pilih versi di bawah versi bersyarat, tidak termasuk versi bersyarat
gte: lebih besar dari atau sama dengan, pilih versi bersyarat atau lebih tinggi, termasuk versi bersyarat
lte: kurang dari atau sama dengan, pilih versi di bawah versi bersyarat, termasuk versi bersyarat
! : Pilih semua versi kecuali versi bersyarat, terlepas dari tinggi atau rendahnya, cara menggunakan komentar bersyarat
Perhatikan untuk mengganti <> pada kode dengan tanda lebih besar dari atau kurang dari dalam bahasa Inggris.
Kode berikut adalah komentar bersyarat yang dijalankan pada browser non-IE
Anda tidak menggunakan Internet Explorer
Anda menggunakan Internet Explorer versi 6 atau browser non-IE