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 dc6dce4a544fdca2df29d5ac0ea9906b di bawah teg 6c04bd5ca3fcae76e30b72ad730ca86d dan kemudian menentukan kelas untuk div:

Kemudian CSS direka bentuk seperti ini: #container{ min-width: 600px width:expression(document.body.clientWidth 817ac88c330c69ebe1d479e196e3803b 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 HTMLb390322fe69e754cc2d7247050226b6d 961dd75297247cb17f67e6948fb0666816b28748ea4df4d9c2150843fecfba68 933da5eb64e67ee2599877186ac08c9716b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68
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)!