Kompatibilitas CSS dengan browser terkadang membuat orang pusing. Mungkin jika Anda memahami teknik dan prinsipnya, saya telah mengumpulkan tips kompatibilitas untuk IE7, 6 dan Fireofx dari Internet dan memilahnya. Untuk transisi ke web2.0, cobalah menulis kode dalam format xhtml, dan DOCTYPE mempengaruhi pemrosesan CSS Sebagai standar W3C, pernyataan DOCTYPE harus ditambahkan.
Kiat CSS
1.Masalah pemusatan vertikal div
vertical-align:middle; Tingkatkan spasi baris ke ketinggian yang sama dengan keseluruhan garis DIV-height:200px; Kerugiannya adalah Anda perlu mengontrol konten dan tidak membungkusnya di baris lain.
2. Masalah penggandaan margin
Margin yang ditetapkan untuk set div ke float akan digandakan di bawah IE. Ini adalah bug yang ada di ie6. Solusinya adalah dengan menambahkan display:inline; di dalam div ini.
Misalnya:
<#div id=”imfloat”>
Css yang sesuai adalah
#imfloat{
mengapung:kiri;
margin:5px;/*Di bawah IE, ini dipahami sebagai 10px*/
display:inline;/*Di bawah IE, ini akan dipahami sebagai 5px*/}
3. Jarak ganda yang dihasilkan oleh floating ie
#box{ float:left; width:100px; margin:0 0 0 100px; //Dalam hal ini, IE akan menghasilkan jarak 200px display:inline;
Mari kita bahas dua elemen blok dan sebaris secara mendetail: Karakteristik elemen blok adalah selalu dimulai pada baris baru, dan tinggi, lebar, tinggi garis, dan margin semuanya dapat dikontrol (elemen blok); elemen inline adalah itu, dan elemen lainnya berada pada baris yang sama dan tidak dapat dikontrol (elemen inline);
#box{ display:block; //Anda dapat menyimulasikan elemen sebaris sebagai elemen blok display:inline; //Mencapai efek penataan pada baris yang sama diplay:table;
4 IE masalah dengan lebar dan tinggi
IE tidak mengenal definisi min-, tetapi 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:
#kotak{ lebar: 80 piksel; tinggi: 35 piksel;}html>badan #kotak{ lebar: otomatis; tinggi: otomatis; lebar minimum: 80 piksel;
5. Lebar minimum halaman
min-width adalah perintah CSS yang sangat nyaman. Perintah ini dapat menentukan bahwa lebar minimum suatu elemen tidak boleh lebih kecil dari lebar tertentu, sehingga tata letaknya 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 meletakkan <div> di bawah tag <body>, lalu menentukan kelas untuk div tersebut, lalu mendesain CSS seperti ini:
#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}
Lebar minimum pertama 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.