Analisis Pertukaran Perkara Utama_Pengalaman Keserasian CSS

IE lwn FF

Mata keserasian CSS:

DOCTYPE mempengaruhi pemprosesan CSS

FF: div sudah berpusat apabila margin-kiri dan margin-kanan ditetapkan kepada auto, tetapi IE tidak berfungsi

FF: Apabila menetapkan penjajaran teks pada badan, div perlu menetapkan margin: auto (terutamanya margin-kiri, margin-kanan) untuk dipusatkan

FF: Selepas menetapkan padding, div akan meningkatkan ketinggian dan lebar, tetapi IE tidak mengetahuinya, jadi anda perlu menggunakan !important untuk menetapkan ketinggian dan lebar tambahan

FF: menyokong !important, tetapi IE mengabaikannya, anda boleh menggunakan !important untuk menetapkan gaya

div khas untuk FF Masalah pemusatan menegak: vertical-align:middle Naikkan jarak baris kepada ketinggian yang sama dengan keseluruhan DIV line-height:200px; dan ia akan berpusat secara menegak. Kelemahannya ialah anda perlu mengawal kandungan tanpa membalut

kursor: penunjuk boleh memaparkan bentuk jari kursor dalam IE FF pada masa yang sama, tangan hanya boleh digunakan dalam IE

FF: Pautan menambah sempadan dan warna latar belakang, anda perlu menetapkan paparan: blok, dan tetapkan apungan: kiri untuk memastikan tiada garis putus. Merujuk kepada menubar, menetapkan ketinggian a dan menubar adalah untuk mengelakkan terkehel paparan tepi bawah Jika ketinggian tidak ditetapkan, anda boleh memasukkan ruang dalam menubar koleksi kecil penyelesaian keserasian XHTML+CSS

Di sana adalah banyak faedah menggunakan seni bina XHTML+CSS , tetapi memang terdapat beberapa masalah, sama ada disebabkan oleh penggunaan yang tidak mahir atau pemikiran yang tidak jelas, saya akan menulis beberapa masalah yang saya hadapi di bawah untuk menyelamatkan semua orang daripada melihat sekeliling^^

1. Dalam mozilla Tafsiran model BOX yang tidak konsisten dalam firefox dan IE menghasilkan perbezaan 2px:

div{margin:30px!important;margin:28px;}
Perhatikan bahawa susunan kedua-dua margin ini tidak boleh ditulis Sebaliknya, menurut Ajie, atribut !important tidak dikenali oleh IE, tetapi pelayar lain boleh. Jadi ia sebenarnya ditafsirkan seperti ini di bawah IE:

div{maring:30px;margin:28px}

Jika anda mengulangi definisi, ia akan dilaksanakan mengikut yang terakhir, jadi anda tidak boleh hanya menulis margin:XXpx!important ;

2 Tafsiran BOX bagi IE5 dan IE6 adalah tidak konsisten Lebar div{width:300px;margin:0 10px 0 10px;}di bawah IE5 akan ditafsirkan sebagai. 300px-10px (padding kanan)-10px (padding kiri) Lebar akhir div ialah 280px, dan pada IE6 dan pelayar lain, lebar dikira sebagai 300px+10px (padding kanan) + 10px (padding kiri) = 320px. Pada masa ini kita boleh membuat pengubahsuaian berikut

div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}

, tentang ini/**/ Saya tidak begitu faham apa itu saya hanya tahu bahawa sokongan IE5 dan firefox itu tetapi IE6 tidak Jika sesiapa faham, sila beritahu saya, terima kasih! :)

Teg 3.ul mempunyai nilai padding secara lalai dalam Mozilla, tetapi dalam IE hanya margin yang mempunyai nilai, jadi tentukan

ul{margin:0; padding:0;} dahulu

boleh menyelesaikan kebanyakan masalah

4 Mengenai skrip, atribut bahasa tidak disokong dalam xhtml1.1 Anda hanya perlu menukar kod kepada


<script>.</script>