Rumah >hujung hadapan web >tutorial css >Ringkasan analisis keserasian css berbilang penyemak imbas_Pertukaran pengalaman

Ringkasan analisis keserasian css berbilang penyemak imbas_Pertukaran pengalaman

WBOY
WBOYasal
2016-05-16 12:06:531617semak imbas

Mata keserasian CSS:
1. DOCTYPE mempengaruhi pemprosesan CSS.
2. FF: div sudah berada di tengah apabila margin-kiri dan margin-kanan ditetapkan kepada auto, tetapi IE tidak berfungsi.
3. FF: Apabila badan menetapkan penjajaran teks, div perlu menetapkan jidar: auto (terutamanya jidar-kiri, jidar-kanan) untuk dipusatkan.
4. FF: Selepas menetapkan padding, div akan meningkatkan ketinggian dan lebar, tetapi IE tidak, jadi anda perlu menggunakan !important untuk menetapkan ketinggian dan lebar tambahan.
5. FF: menyokong !penting, tetapi IE mengabaikannya Anda boleh menggunakan !important untuk menetapkan gaya khas untuk FF.
6. Masalah pemusatan menegak div: vertical-align:middle; Tingkatkan jarak baris ke ketinggian yang sama dengan keseluruhan DIV line-height:200px Kemudian masukkan teks dan ia akan dipusatkan secara menegak. Kelemahannya ialah anda perlu mengawal kandungan dan tidak membalutnya.
7. kursor: penunjuk boleh memaparkan bentuk jari kursor dalam IE FF pada masa yang sama, tangan hanya boleh dipaparkan dalam IE.
8. FF: Untuk menambah sempadan dan warna latar belakang pada pautan, anda perlu menetapkan paparan: blok dan apungan: kiri untuk memastikan tiada garis putus. Merujuk kepada bar menu, menetapkan ketinggian a dan bar menu adalah untuk mengelakkan terkehel paparan tepi bawah Jika ketinggian tidak ditetapkan, ruang boleh dimasukkan dalam bar menu.

Koleksi kecil penyelesaian keserasian XHTML+CSS
Terdapat banyak faedah menggunakan rangka kerja XHTML+CSS, tetapi memang terdapat beberapa masalah, sama ada ia disebabkan oleh penggunaan yang tidak mahir atau pemikiran yang tidak jelas, saya akan mula-mula ringkaskan beberapa masalah yang saya hadapi Masalah yang dihadapi ditulis di bawah untuk menyelamatkan semua orang daripada melihat sekeliling ^^

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

Salin kod Kod adalah seperti berikut:

div{margin:30px!important;margin :28px;}

Nota Susunan kedua-dua jidar ini tidak boleh diterbalikkan Menurut Ajie, atribut !penting tidak boleh dikenali oleh IE, tetapi pelayar lain boleh. Jadi ia sebenarnya ditafsirkan seperti ini di bawah IE:
Salin kod Kodnya adalah seperti berikut:

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

Jika anda mengulangi definisi, yang terakhir akan dilaksanakan, jadi anda tidak boleh menulis margin:XXpx!important sahaja; >2. Penjelasan BOX untuk IE5 dan IE6 Inconsistency: Lebar div{width:300px;margin:0 10px 0 10px;} di bawah IE5 akan ditafsirkan sebagai 300px-10px (padding kanan)-10px (padding kiri). lebar div ialah 280px, manakala dalam IE6 dan pelayar lain Lebar pada peranti 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}
Mengenai ini/**/ Saya tidak begitu faham apa itu saya hanya tahu bahawa IE5 dan firefox menyokongnya IE6 tidak Jika sesiapa Jika anda 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 ia dahulu:


ul{margin:0;padding:0;}


boleh menyelesaikan kebanyakan masalah .

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