Kod CSS untuk melaksanakan teknik yang serasi dengan pelbagai pelayar_Pertukaran pengalaman

Apabila menulis helaian gaya CSS, kami sering menghadapi masalah keserasian penyemak imbas Contohnya, penyemak imbas dengan kernel berbeza mungkin tidak memaparkan paparan yang sama, dan versi penyemak imbas yang berbeza juga mungkin mempunyai masalah keserasian atas dan bawah menjadi masalah kepada kami Jika anda tahu teknologi hack css dengan baik, maka ini terlalu mudah, tetapi bagi mereka yang tidak memahaminya dengan baik, ia benar-benar menjadi masalah bagi mereka. Berikut ialah artikel dari blog rasmi Zhao Lei untuk memperkenalkan petua untuk keserasian dengan pelbagai pelayar. Tetapi jangan berfikir bahawa selagi terdapat ralat dalam paparan pelayar, ia juga mungkin struktur anda tidak baik , anda perlu memasang bar keluli terlebih dahulu.

1, tafsiran berbeza bagi penterjemah kotak

Kodnya adalah seperti berikut:

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

2, sembunyikan css dalam iaitu, gunakan. sub-pilihan html>body #box{ }
3, hanya IE yang mengenali *html #box{ }
4, sah dalam ie/win tetapi tersembunyi dalam ie/max, gunakan garis serong ke belakang /* */
# kotak{ }
5, tentukan gaya berasingan untuk ie. Berikut adalah penerangan yang lebih terperinci

6, jarak dua kali dijana dengan apungan iaitu #kotak{ float:left:100px; 0 0 100px ; //Dalam kes ini, IE akan menghasilkan jarak 200px display:inline; //Abaikan floats}
Mari kita bincangkan tentang dua elemen blok dan sebaris secara terperinci sentiasa berada pada baris baharu Permulaan, tinggi, lebar, ketinggian garisan dan jidar semuanya boleh dikawal (elemen blok); pada baris yang sama dengan elemen lain,... tidak boleh dikawal (sebaris elemen);
#box{ display:block; //Boleh mensimulasikan elemen sebaris sebagai elemen blok paparan:sebaris; //Mencapai kesan penyusunan dalam baris yang sama diplay:table; jadual}

7, untuk oprea sahaja @media all dan (min-width:0px){/* opera */#box{ }}
8, IE dan masalah lebar dan tinggi
IE tidak mengenali definisi min-, tetapi sebenarnya Ia menganggap lebar dan tinggi normal seolah-olah ada min. Ini adalah 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 dan ketinggian min, lebar dan tinggi tidak ditetapkan sama sekali di bawah IE.

Sebagai contoh, jika anda ingin menetapkan imej latar belakang, lebar ini lebih penting. Untuk menyelesaikan masalah ini, anda boleh melakukan ini: #box{ width: 80px;}html>body #box{ width: auto; 🎜> 9. Lebar minimum halaman
Lebar min ialah arahan CSS yang sangat mudah Ia boleh menentukan bahawa lebar minimum elemen tidak boleh kurang daripada lebar tertentu, untuk memastikan tetapan taip sentiasa betul. . Tetapi IE tidak mengenali ini, dan ia sebenarnya menganggap lebar sebagai lebar minimum. Untuk menjadikan perintah ini berfungsi pada IE, anda boleh meletakkan

di bawah teg dan kemudian menentukan kelas untuk div:

Kemudian CSS direka bentuk seperti ini: #container{ min-width: 600px width:expression(document.body.clientWidth Lebar min pertama adalah biasa; tetapi lebar dalam baris kedua menggunakan Javascript, yang hanya dikenali oleh IE, yang juga akan menjadikan dokumen HTML anda kurang formal. Ia sebenarnya melaksanakan lebar minimum melalui penghakiman Javascript. ,

Kaedah yang sama juga boleh digunakan untuk mencapai lebar maksimum untuk IE: #container{min-width: 600px;max-width: 1200px;width:expression(document.body.clientWidth 1200? "1200px" : "auto";}
10, terapung jelas
.hackbox{ display:table; //Paparkan objek sebagai jadual tahap elemen blok} atau .hackbox{ clear:both;}
Atau tambah: selepas (objek pseudo) untuk menetapkan kandungan yang berlaku selepas objek Ia biasanya digunakan bersama dengan kandungan IE tidak menyokong objek pseudo ini dan tidak disokong oleh pelayar Ie, jadi ia tidak menjejaskan pelayar IE/WIN. -------Ini yang paling menyusahkan...

#box:after{ content: "."; paparan: tinggi: 0;
11, teks IE terapung DIV menghasilkan pepijat 3 piksel
Objek di sebelah kiri terapung, dan sebelah kanan diletakkan menggunakan jidar kiri patch luar. Teks dalam objek di sebelah kanan akan berada 3px dari kiri. 800px;}#left{ float:left; width :50%;}#right{ width:50%;}*html #left{ margin-right:-3px;
Kod HTML

12, pemilih atribut (ini tidak serasi, ia adalah pepijat dalam menyembunyikan css) p[id]{}div[id]{}
Ini disembunyikan untuk IE6.0 dan versi di bawah, serta berfungsi dengan FF dan OPera

Masih terdapat perbezaan antara pemilih atribut dan sub-pemilih Skop sub-pemilih dikecilkan dalam bentuk, manakala skop pemilih atribut adalah agak besar, contohnya, dalam p[id], semua tag p mempunyai id. semuanya adalah gaya yang sama

Di atas ialah kod css untuk melaksanakan teknik yang serasi dengan pelbagai pelayar_kandungan pertukaran pengalaman, sila ambil perhatian laman web PHP Cina (www.php .cn)!