iaitu tidak serasi dengan css

IE tidak serasi dengan CSS: penyelesaian dan pengalaman praktikal

Dengan pembangunan berterusan teknologi Internet, CSS telah menjadi salah satu alat penting untuk reka bentuk dan reka letak web. Walau bagaimanapun, masalahnya ialah IE (terutama IE6) tidak serasi dengan CSS, yang membawa banyak masalah dan masalah kepada pembangun.

Dalam kerja sebenar, saya telah menghadapi banyak masalah yang IE tidak serasi dengan CSS. Di bawah, saya akan berkongsi dengan anda beberapa pengalaman dan teknik saya dalam menyelesaikan masalah ini, dengan harapan dapat membantu dan memberi inspirasi kepada pembaca yang memerlukan.

1. Biasa dengan masalah ketidakserasian CSS IE

Pertama sekali, kita perlu memahami masalah ketidakserasian CSS IE hanya dengan memahami punca utamanya masalah boleh kita selesaikan dengan lebih baik. Berikut ialah beberapa isu ketidakserasian CSS IE biasa:

• Isu model kotak. IE6 menggunakan model kotak IE secara lalai dan bukannya model kotak standard. Ini menyebabkan masalah apabila mengira lebar dan ketinggian elemen.
• Masalah ketelusan PNG. IE6 tidak menyokong ketelusan PNG dan IE6 dan IE7 mengendalikan ketelusan PNG secara berbeza.
• Isu terapung dan jelas. IE6 dan IE7 mempunyai beberapa masalah dengan pengendalian terapung dan kosong, mengakibatkan susun atur mengelirukan.
• Masalah dengan elemen peringkat blok sebaris. IE6 dan IE7 mengendalikan elemen peringkat blok sebaris secara berbeza daripada pelayar standard, yang boleh membawa kepada masalah reka letak dengan mudah.
• Kedudukan:isu relatif dan indeks z. IE6 dan IE7 juga mengendalikan position:relative dan z-index secara berbeza daripada pelayar standard, jadi perhatian khusus diperlukan.

2. Menggunakan ulasan bersyarat

Komen bersyarat ialah bentuk ulasan khas untuk pelayar IE, yang membolehkan kami menetapkan gaya CSS khas untuk IE. Kami boleh mengenal pasti pelayar IE melalui komen bersyarat, dan kemudian menambah kod CSS yang sepadan untuk menangani masalah IE. Contohnya:

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

Kami juga boleh menggunakan ulasan bersyarat dalam fail CSS:

#box {
    height:150px;
    width:300px;
    /* IE6 */ 
    _height:200px;
    _width:350px;
}

Dalam kod di atas, kami menggunakan awalan garis bawah untuk menentukan gaya yang hanya berkuat kuasa dalam IE6.

3. Menggunakan Hack

Hack ialah cara teknikal untuk menyasarkan perbezaan sintaksis pelayar IE. Dengan menulis kod CSS bukan standard, kami boleh mencapai kesan khusus dalam IE. Contohnya:

#box {
   /* 在IE中，动态属性（expression）可以用来改变元素的样式。 */
   width:100px;         /* 标准浏览器 */
   width:expression( document.documentElement.clientWidth > 500 ? "500px" : "auto" );
}

4. Menggunakan pemalam dan rangka kerja JS

Isu ketidakserasian CSS IE telah lama wujud, jadi terdapat banyak usaha dalam komuniti untuk menangani isu ini pemalam dan rangka kerja JS. Sebagai contoh, kita boleh menggunakan pemalam keserasian jquery jquery-compat untuk menyelesaikan masalah dalam IE.

<!--[if lt IE 9]>
  <script src="jquery-1.11.3.min.js"></script>
  <script src="jquery-compat.js"></script>
<![endif]-->

Dengan menggunakan jquery-compat, kami boleh menyelesaikan banyak masalah CSS dalam pelayar IE dengan mudah.

5. Pembangunan songsang

Dalam kerja sebenar, kita boleh menggunakan pembangunan songsang (juga dipanggil "pertambahan progresif") untuk memastikan tapak web kelihatan baik dalam keserasian IE Baik. Idea asas pembangunan terbalik adalah untuk terlebih dahulu mempertimbangkan masalah yang ada dalam pelayar IE, dan kemudian menulis gaya CSS khusus untuk menangani masalah ini. Akhir sekali, kami akan mempertimbangkan cara mengoptimumkan dan menyelaraskan gaya ini untuk memenuhi pelayar standard.

6. Menguji dan menyahpepijat

Akhir sekali, kami perlu menguji dan menyahpepijat tapak web kami untuk memastikan ia boleh memaparkan dengan betul apa yang kami mahu dalam pelayar IE yang berbeza dan versi kesan yang diingini. Kami boleh menggunakan alat pembangun pelayar IE untuk menyahpepijat CSS dan mencari masalah. Selain itu, kami juga boleh menggunakan beberapa alat ujian pelayar untuk menguji prestasi tapak web kami dalam pelayar yang berbeza.

Ringkasan

Isu ketidakserasian CSS IE adalah topik biasa, tetapi dalam kerja sebenar, ia masih membawa kita cabaran yang agak sukar. Dengan membaca artikel ini, saya percaya pembaca telah mempelajari beberapa pengalaman dan teknik untuk menyelesaikan isu ketidakserasian IE CSS. Sama ada anda seorang jurutera pembangunan bahagian hadapan atau pereka laman web, kami berharap anda dapat menyelesaikan masalah ini dengan lebih cepat dan lebih tepat apabila anda menghadapinya di tempat kerja.

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