Hack CSS ialah kaedah umum untuk mencapai keserasian sempurna CSS dengan pertukaran IE6/IE7/FF_Experience

Isu biasa bahawa CSS serasi dengan pelbagai penyemak imbas Terdapat tutorial di seluruh Internet. Kandungan berikut adalah ringkasan peribadi 1. CSS HACK
Dua kaedah berikut boleh menyelesaikan hampir semua HACK hari ini

1, !important

Dengan sokongan IE7 untuk !important, kaedah !important kini hanya untuk IE6. HACK. (Perhatikan tulisan. Ingat bahawa kedudukan pengisytiharan perlu lebih awal.)
lebar: 100px!important; */
lebar : 80px; /* IE6 */
}



2, IE6/IE77 untuk FireFox
*+html dan *html ialah teg khusus IE, firefox tidak menyokongnya pada masa ini Dan *+html ialah teg unik untuk IE7
*+html HACK untuk IE7 mesti memastikan pernyataan berikut di bahagian atas HTML:



2. Penutupan apungan sejagat

Untuk prinsip apungan jernih, sila rujuk [Cara Mengosongkan Terapung Tanpa Penanda Struktur]
Tambahkan kod berikut pada CSS Global dan tambah class="clearfix" ke div yang perlu ditutup. Ia berfungsi setiap kali. >kandungan:".";
paparan:blok;
tinggi:0;
keterlihatan:tersembunyi; >display:inline-block;
}
/* Hide from IE Mac * /
.clearfix {display:block;}
/* Tamatkan hide from IE Mac */
/* akhir clearfix */


3 Lain-lain Petua keserasian

1. Menetapkan padding pada div di bawah FF akan menyebabkan lebar dan ketinggian meningkat, tetapi IE tidak. (boleh diselesaikan dengan !important)
2. Masalah tengahan bukan untuk membungkus kandungan.)
2). Jidar tengah mendatar: 0 auto; untuk menetapkan paparan: blok; (biasa dalam teg navigasi)
4 Perbezaan dalam pemahaman BOX antara FF dan IE menghasilkan perbezaan 2px dalam div ditetapkan untuk terapung di bawah IE , Teg ul mempunyai gaya senarai dan padding secara lalai di bawah FF Adalah lebih baik untuk mengisytiharkannya terlebih dahulu untuk mengelakkan masalah yang tidak perlu (Lazim dalam teg navigasi dan senarai kandungan)
6. Sebagai pembungkus luaran, jangan tetapkan. ketinggian div. Adalah lebih baik untuk menambah limpahan: tersembunyi untuk mencapai kebolehsuaian ketinggian
7 Mengenai kursor tangan: penunjuk hanya boleh digunakan untuk IE gaya untuk firefox ie6 ie7
Kini kebanyakannya menggunakan !important untuk menggodam, dan ujian untuk ie6 dan firefox boleh dipaparkan secara normal
Tetapi ie7 boleh mentafsirkan !penting dengan betul, yang akan menyebabkan halaman itu gagal permintaan! Cari pin
Penggodaman yang baik untuk IE7 ialah menggunakan "*+html".
Sekarang tulis CSS seperti ini:

#1 { color: #333; } /* Moz */
* html #1 { color: #666 } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
Kemudian warna fon dipaparkan sebagai #333 di bawah firefox, #666 di bawah IE6 dan #999 di bawah IE7 . 2 Memusatkan isu dalam reka letak css Takrif gaya utama adalah seperti berikut: badan {TEXT-ALIGN: center;} #center {MARGIN-RIGHT: auto; MARGIN -LEFT: auto; } Penjelasan: Tentukan terlebih dahulu TEXT-ALIGN: ini bermakna kandungan dalam elemen induk ditengahkan; Tetapi ia tidak boleh dipusatkan di mozilla. Penyelesaiannya ialah menambah "MARGIN-RIGHT: auto;MARGIN-LEFT: auto; " apabila menetapkan definisi elemen kanak-kanak Perlu diingat bahawa jika anda ingin menggunakan kaedah ini untuk memusatkan keseluruhan halaman, adalah disyorkan untuk tidak untuk Tetapkan dalam DIV, anda boleh membahagi berbilang div dalam urutan Hanya tentukan MARGIN-RIGHT: auto;MARGIN-LEFT: auto;

3 Tafsiran berbeza bagi model kotak

#box{ width:600px; //for ie6.0- width:500px //for ff+ie6.0}
# box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}

4 Ganda dijana dengan terapung iaitu Jarak

#box{ float:left:100px; margin:0 0 0 100px; 🎜 > Mari kita bincangkan tentang dua elemen blok dan sebaris secara terperinci Ciri-ciri elemen Blok ialah: ia sentiasa bermula pada baris baharu, dan ketinggian, lebar, ketinggian garisan dan jidar semuanya boleh dikawal (elemen blok); ciri-ciri elemen Sebaris ialah: dan Elemen lain berada pada baris yang sama,... tidak boleh dikawal (elemen sebaris); #box{ display:block; display:inline; //Mencapai yang sama Kesan susunan baris diplay:table;

IE tidak mengenali definisi min-, tetapi sebenarnya ia menganggap lebar dan tinggi normal seolah-olah ada min. Ini akan menyebabkan masalah besar. Jika anda hanya menggunakan lebar dan tinggi,
kedua-dua nilai ini tidak akan berubah dalam penyemak imbas biasa Jika anda hanya menggunakan lebar min dan ketinggian min, ia adalah bersamaan dengan tidak menetapkan lebar dan tinggi di bawah IE tinggi.
Sebagai contoh, jika anda ingin menetapkan imej latar belakang, lebar ini lebih penting. Untuk menyelesaikan masalah ini, anda boleh melakukan ini:
#box{ lebar: 80px;}html>body #box{ lebar: auto; ;}

6 Lebar minimum halaman

lebar min ialah arahan CSS yang sangat mudah. ​​Ia boleh menentukan bahawa lebar minimum elemen tidak boleh lebih kecil daripada lebar tertentu, supaya susun atur boleh sentiasa betul. Tetapi IE tidak mengenali ini,
dan ia sebenarnya menganggap lebar sebagai lebar minimum. Untuk membuat arahan ini berfungsi pada IE, anda boleh meletakkan
di bawah teg
, dan kemudian tentukan kelas untuk div:
Kemudian CSS direka bentuk seperti ini:

#container{ min-width : 600px; width:expression(document.body.clientWidth Lebar min pertama adalah biasa; Hanya IE boleh mengenalinya, yang juga akan menjadikan dokumen HTML anda kurang formal. Ia sebenarnya melaksanakan lebar minimum melalui penghakiman Javascript.

7 Clear floats
.hackbox{ display:table; //Paparkan objek sebagai jadual tahap elemen blok} atau .hackbox{ clear:both;}
Atau tambah: selepas (objek Pseudo), menetapkan kandungan yang berlaku selepas objek, biasanya digunakan bersama dengan kandungan IE tidak menyokong objek pseudo ini, dan pelayar bukan Ie menyokongnya . Perkara yang paling menyusahkan tentang ini... #box:after{ content: "."; paparan: tinggi: 0; kedua-duanya; pepijat 3 piksel

Objek kiri terapung, bahagian kanan diletakkan menggunakan jidar kiri tampung luar dan teks dalam objek kanan akan mempunyai jarak 3px dari kiri 🎜>#kotak{ float :kiri; lebar:800px;}#kiri{ float:kiri;}#kanan{ lebar:50%;}*html #kiri{ margin-kanan:-3px; Ayat ini adalah kuncinya}
Kod HTML







9 Pemilih atribut (ini tidak dianggap serasi, ia adalah pepijat dalam css tersembunyi)

p[id]{}div[id]{}

Ini disembunyikan untuk IE6.0 dan versi di bawah, dan digunakan oleh FF dan OPera

Masih terdapat perbezaan antara pemilih atribut dan sub-pemilih, sub-pemilih Skop pemilih dikecilkan dalam bentuk, dan skop pemilih atribut adalah agak besar Sebagai contoh, dalam p[id], semua tag p dengan id adalah sama gaya.

10 IE masalah sorok-sorok

Apabila aplikasi div kompleks dan terdapat beberapa pautan dalam setiap lajur, masalah sorok-sorok DIV akan mudah berlaku di kali ini.
Sesetengah kandungan tidak boleh dipaparkan Apabila tetikus memilih kawasan ini, didapati kandungan itu memang ada pada halaman.
Penyelesaian: Gunakan atribut ketinggian garis untuk #layout atau gunakan ketinggian dan lebar tetap untuk #layout. Pastikan struktur halaman semudah mungkin.

11 Ketinggian bukan penyesuaian

Ketinggian bukan penyesuaian bermakna apabila ketinggian objek lapisan dalam berubah, ketinggian lapisan luar tidak boleh dilaraskan secara automatik, terutamanya apabila objek lapisan dalam menggunakan
margin atau jam paddign.
Contoh:



Kandungan dalam objek p



CSS: #kotak {warna latar:#eee;}
# kotak p {margin-top: 20px; margin-bottom: 20px; text-align:center; tersembunyi;} Atau tambahkan atribut sempadan pada DIV.