css iaitu kaedah penulisan

CSS ialah bahagian penting dalam proses reka bentuk dan pembangunan web kami, sama ada ia mencantikkan halaman, reka letak atau mencapai kesan dinamik, CSS tidak dapat dipisahkan. Walau bagaimanapun, penyemak imbas yang berbeza mempunyai tahap sokongan yang berbeza untuk CSS Yang paling biasa dan terkenal ialah pelayar IE tidak menyokong CSS dengan cukup baik, mengakibatkan kesan paparan yang buruk bagi banyak halaman di bawah pelayar IE. Oleh itu, kita perlu memahami cara menulis CSS di bawah pelayar IE untuk memastikan kesan halaman web dapat dipaparkan dengan baik dalam setiap pelayar.

1. Sebab mengapa penyemak imbas IE tidak mempunyai sokongan yang mencukupi untuk CSS

Pelayar IE jauh lebih perlahan daripada pelayar lain dalam melaksanakan CSS. Model kotak tidak lengkap: Versi sebelumnya IE7 menggunakan kaedah reka letak yang dipanggil model kotak IE, yang berbeza daripada model kotak standard, menghasilkan kesan paparan berbeza bagi sekeping kod yang sama dalam penyemak imbas yang berbeza.

2. Penghuraian CSS bukan standard: Enjin penghuraian CSS pelayar IE tidak mematuhi sepenuhnya piawaian W3C Beberapa sifat CSS tidak disokong oleh IE, dan penggunaan beberapa pemilih CSS juga dihadkan.

3. Konflik antara JS dan CSS: Penyampaian JavaScript dan CSS dalam penyemak imbas IE berjalan pada urutan yang sama Apabila JS tersekat, ia akan menyebabkan CSS tidak dipaparkan dalam masa, menjejaskan kesan paparan halaman .

2. Kaedah penulisan CSS yang biasa digunakan dalam pelayar IE

Untuk mencapai kesan yang sama dalam pelayar IE seperti dalam pelayar arus perdana yang lain, kita boleh menggunakan kaedah penulisan CSS berikut:

Kaedah penulisan hack

1. Kaedah penulisan hack merujuk kepada kaedah teknikal untuk menilai versi penyemak imbas tertentu melalui pernyataan komen bersyarat, untuk melaksanakan gaya yang berbeza atau membetulkan pepijat penyemak imbas untuk tertentu pelayar.

Contohnya:

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

Kod ini menunjukkan bahawa helaian gaya ie6.css hanya akan dimuatkan dalam penyemak imbas IE6. Dengan cara yang sama, versi penyemak imbas yang berbeza seperti IE7 dan IE8 boleh dinilai melalui pernyataan bersyarat yang sepadan, dan tetapan gaya yang berbeza boleh dibuat.

atribut zum

2. zum ialah atribut CSS yang hanya digunakan dalam penyemak imbas IE, digunakan untuk mencapai kesan zum masuk dan zum keluar elemen halaman.

Contohnya:

div {
    zoom: 1;
}

Kod ini bermaksud untuk membesarkan elemen div Faktor pembesaran dan kesan tertentu boleh dilaraskan mengikut situasi sebenar.

atribut penapis

3. penapis ialah atribut CSS yang unik untuk pelayar IE, yang boleh mencapai kesan kabur, kesan skala kelabu, kesan ketelusan, dsb. imej.

Contohnya:

#imgBox {
    filter: alpha(opacity=50);
    opacity: 0.5;
}

Kod ini bermaksud untuk menetapkan ketelusan elemen dengan id imgBox kepada 50%, dengan alpha mewakili atribut penapis pelayar IE dan kelegapan ialah atribut CSS3 standard .

atribut display:inline-block

4. display:inline-block attribute mempunyai keserasian yang baik di bawah pelayar lain, tetapi ia tidak berfungsi dalam IE6 dan IE7 Ya, ia boleh diselesaikan dengan menulis perkara berikut:

Contohnya:

.block {
    display: inline-block;
    *display: inline;
    zoom: 1;
}

Antaranya, '*display: inline' bermakna ia hanya berkuat kuasa dalam pelayar IE6 dan IE7, mencapai keserasian.

position:relative attribute

5. Kesan position:relative dalam penyemak imbas lain pada asasnya sama seperti dalam pelayar IE, tetapi dalam IE6, elemen di bawah mutlak atribut akan Ditindan bersama, ia boleh dibaiki dengan tulisan berikut:

Contohnya:

.box {
    position: relative;
    _position: absolute;
    *left: 0;
    *top: 0;
}

Antaranya, *kedudukan: mutlak bermakna ia hanya berkuat kuasa dalam pelayar IE6, mencapai keserasian.

3. Ringkasan

Melalui pengenalan di atas, kita dapat melihat bahawa sokongan pelayar IE untuk CSS tidak sempurna, tetapi melalui beberapa teknik penggodaman atau kaedah penulisan CSS tertentu, ia boleh dibandingkan dengan yang lain Pelayar mempunyai kesan yang sama. Selepas memahami beberapa ciri dan isu keserasian pelayar IE, kami boleh mereka bentuk dan membangunkan halaman web dengan lebih baik dan mencapai kesan paparan yang lebih baik.

Atas ialah kandungan terperinci css iaitu kaedah penulisan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!