Rumah hujung hadapan web Soal Jawab bahagian hadapan Bagaimana untuk menetapkan css untuk ie8

Bagaimana untuk menetapkan css untuk ie8

Apr 23, 2023 pm 04:35 PM

Dengan pembangunan Internet, teknologi hadapan seperti HTML, CSS dan JavaScript telah menjadi salah satu teknologi teras untuk pembangunan tapak web moden. Walau bagaimanapun, pada zaman awal Internet, isu keserasian pelayar web merupakan masalah utama bagi pembangun bahagian hadapan. Antaranya, yang paling tipikal ialah isu keserasian pelayar IE. Masalah keserasian pelayar IE amat serius, dan IE8, sebagai pelayar lama, juga memerlukan perhatian khusus dari segi keserasian. Artikel ini terutamanya akan memperkenalkan cara menetapkan CSS untuk mendapatkan keserasian terbaik pada pelayar IE8.

1 Fahami isu keserasian CSS IE8

Isu keserasian penyemak imbas IE8 terutamanya ditunjukkan dalam gaya CSS. CSS ialah bahasa helaian gaya bertingkat yang menyediakan gaya, reka letak dan reka bentuk untuk halaman web. Walau bagaimanapun, pada IE8, CSS tidak memaparkan gaya yang betul seperti yang dilakukan pada pelayar moden yang lain. Masalah ini adalah terutamanya kerana pelayar IE8 tidak menyokong spesifikasi CSS3 terkini, dan sokongannya untuk CSS2 juga tidak lengkap. Oleh itu, semasa menulis helaian gaya CSS, anda perlu memberi perhatian khusus kepada butiran berikut:

  1. Jangan gunakan sifat CSS3, seperti sempadan bulat, dsb.
  2. Elakkan menggunakan kedudukan: tetap, kerana dalam IE8 isu Keserasian akan berlaku pada pelayar;
  3. Elakkan menggunakan peralihan dan animasi;
  4. Elakkan menggunakan warna RGBA.

2. Tetapkan mod dokumen pelayar IE8

Dengan menetapkan mod dokumen pelayar IE8, keserasian CSS pelayar IE8 boleh dipertingkatkan. Pelayar IE8 menyokong 4 mod dokumen, iaitu mod standard, mod campuran, mod keserasian IE7 dan mod keserasian IE5. Secara lalai, IE8 akan menggunakan mod dokumen standard, tetapi jika pengisytiharan jenis dokumen dalam dokumen HTML tidak standard, penyemak imbas secara automatik akan bertukar kepada mod keserasian IE7. Untuk memastikan keserasian IE8, kami perlu memastikan penyemak imbas dalam mod standard.

Untuk menetapkan mod standard penyemak imbas IE8, anda perlu menambah kod berikut pada dokumen HTML:

<!DOCTYPE html>
<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Salin selepas log masuk

Di atas ialah pengisytiharan jenis dokumen HTML5 standard dan ulasan bersyarat . Komen bersyarat ini boleh mensimulasikan pelayar IE8 ke dalam pelayar IE8 standard, dengan itu menyelesaikan isu keserasian CSS. Selain itu, memperkenalkan fail html5.js atau fail modernizr.js ke dalam dokumen juga boleh menyelesaikan masalah sokongan pelayar IE8 untuk elemen HTML5, yang sangat penting untuk membangunkan tapak web responsif.

3. Gunakan CSS Hack

Css Hack merujuk kepada teknologi yang menggunakan kaedah penghuraian berbeza bagi pelayar yang berbeza dalam CSS untuk mencapai keserasian penyemak imbas. Kelebihan CSS Hack ialah ia sangat mudah dan mudah digunakan, tetapi kelemahannya ialah ia bukan amalan standard, dan ia boleh disalahgunakan dengan mudah, yang dalam beberapa kes boleh menyebabkan masalah prestasi dan isu keserasian.

Berikut ialah beberapa Hacks CSS yang sesuai untuk pelayar IE8:

  1. _IE8: Hanya berkesan untuk versi IE8 dan ke bawah.
.class{ color:#000; /* 其他浏览器 */ _color:#f00; /* IE8 */ }
Salin selepas log masuk
  1. *: Berkesan untuk IE7 dan ke bawah.
.class{ color:#000; /* 其他浏览器 */ *color:#f00; /* IE7 */ }
Salin selepas log masuk
  1. +: Hanya berkesan untuk elemen tahap yang sama dalam IE7 dan ke bawah.
.class{ color:#000; /* 其他浏览器 */ +color:#f00; /* IE7 */ }
Salin selepas log masuk

4. Menggunakan Rangka Kerja CSS

Rangka Kerja CSS ialah perpustakaan yang menyediakan pembangun dengan komponen dan templat gaya CSS. Tujuan utama mereka adalah untuk memudahkan kerja pembangunan bahagian hadapan, menyediakan templat reka bentuk standard dan meningkatkan keserasian penyemak imbas.

Sesetengah rangka kerja css biasa termasuk Bootstrap, Foundation, Bulma, UI Semantik, dll. Kesemuanya menyediakan satu siri gaya CSS yang boleh membantu kami menyelesaikan isu keserasian penyemak imbas. Pada masa yang sama, mereka juga mempunyai ciri reka bentuk responsif dan boleh bertindak balas terhadap peranti mudah alih.

5. Gunakan Modernizr

Modernizr ialah perpustakaan JavaScript yang boleh mengesan sokongan CSS3 dan HTML5 penyemak imbas. Pelayar IE8 mempunyai sokongan yang sangat terhad untuk CSS3 dan HTML5, jadi menggunakan Modernizr boleh menjadikan kod CSS kami lebih mudah disesuaikan.

Dengan Modernizr, kami boleh mengesan sama ada ciri CSS3 atau HTML5 tertentu tersedia, dan jika ada, gunakan kesan CSS3 atau HTML5 yang sepadan. Jika itu tidak berjaya, anda boleh menggunakan kod CSS dan JavaScript sedia ada.

Akhir sekali, walaupun pelayar IE8 ialah penyemak imbas yang lebih lama, ia masih mempunyai kepentingannya dalam beberapa senario tertentu. Dalam proses pembangunan sebenar, kita harus mencuba yang terbaik untuk memastikan keserasian tapak web pada pelayar IE8. Melalui pengenalan artikel ini, kita boleh belajar cara menyediakan CSS dengan betul untuk mendapatkan keserasian terbaik pada pelayar IE8.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan css untuk ie8. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Terangkan konsep pemuatan malas. Terangkan konsep pemuatan malas. Mar 13, 2025 pm 07:47 PM

Terangkan konsep pemuatan malas.

Apa itu useeffect? Bagaimana anda menggunakannya untuk melakukan kesan sampingan? Apa itu useeffect? Bagaimana anda menggunakannya untuk melakukan kesan sampingan? Mar 19, 2025 pm 03:58 PM

Apa itu useeffect? Bagaimana anda menggunakannya untuk melakukan kesan sampingan?

Bagaimanakah kari bekerja di JavaScript, dan apakah faedahnya? Bagaimanakah kari bekerja di JavaScript, dan apakah faedahnya? Mar 18, 2025 pm 01:45 PM

Bagaimanakah kari bekerja di JavaScript, dan apakah faedahnya?

Bagaimana anda mengelakkan tingkah laku lalai di pengendali acara? Bagaimana anda mengelakkan tingkah laku lalai di pengendali acara? Mar 19, 2025 pm 04:10 PM

Bagaimana anda mengelakkan tingkah laku lalai di pengendali acara?

Apakah fungsi pesanan yang lebih tinggi dalam JavaScript, dan bagaimana mereka boleh digunakan untuk menulis lebih banyak kod ringkas dan boleh diguna semula? Apakah fungsi pesanan yang lebih tinggi dalam JavaScript, dan bagaimana mereka boleh digunakan untuk menulis lebih banyak kod ringkas dan boleh diguna semula? Mar 18, 2025 pm 01:44 PM

Apakah fungsi pesanan yang lebih tinggi dalam JavaScript, dan bagaimana mereka boleh digunakan untuk menulis lebih banyak kod ringkas dan boleh diguna semula?

Bagaimanakah algoritma Rekonsiliasi React berfungsi? Bagaimanakah algoritma Rekonsiliasi React berfungsi? Mar 18, 2025 pm 01:58 PM

Bagaimanakah algoritma Rekonsiliasi React berfungsi?

Apakah useContext? Bagaimana anda menggunakannya untuk berkongsi keadaan antara komponen? Apakah useContext? Bagaimana anda menggunakannya untuk berkongsi keadaan antara komponen? Mar 19, 2025 pm 03:59 PM

Apakah useContext? Bagaimana anda menggunakannya untuk berkongsi keadaan antara komponen?

Apakah kelebihan dan kekurangan komponen terkawal dan tidak terkawal? Apakah kelebihan dan kekurangan komponen terkawal dan tidak terkawal? Mar 19, 2025 pm 04:16 PM

Apakah kelebihan dan kekurangan komponen terkawal dan tidak terkawal?

See all articles