Teroka sifat CSS3 yang tidak serasi dengan pelayar IE

Dengan pembangunan teknologi Web, CSS3 telah menjadi salah satu piawaian yang digunakan secara meluas dalam pembangunan bahagian hadapan Web. Walau bagaimanapun, sesetengah versi IE tidak serasi dengan CSS3, yang menyebabkan banyak pembangun bahagian hadapan menghadapi masalah keserasian semasa mereka bentuk. Artikel ini akan meneroka sifat CSS3 yang tidak serasi dengan pelayar IE dan menyediakan beberapa penyelesaian keserasian.

1. Sudut bulat (jejari sempadan)

Sudut bulat ialah salah satu sifat CSS3 yang paling popular, yang boleh menjadikan tapak web anda lebih cantik dan moden. Walau bagaimanapun, Internet Explorer hanya menyokong beberapa sifat sudut bulat. Internet Explorer tidak menyokong atribut jejari sempadan dan tidak menyokong atribut sudut bulat lain yang serupa, seperti jejari atas-kiri-kiri, jejari-atas-kanan-jidar, jejari-kiri-bawah-bawah dan sempadan-bawah -kanan -jejari. Ini memaksa kami menggunakan penyelesaian lain semasa mereka bentuk halaman web.

Penyelesaian: Anda boleh menggunakan JavaScript atau CSS hack untuk menyelesaikan masalah sudut bulat. Anda boleh menggunakan jQuery untuk menambah sudut bulat. Melalui CSS Hack, anda boleh menggunakan sifat seperti -webkit-border-radius, -moz-border-radius, -khtml-border-radius, border-radius.htc untuk menyesuaikan diri dengan pelayar IE yang tidak menyokong sudut bulat.

2. Bayang-bayang (bayang-kotak)

Bayang-bayang ialah satu lagi sifat CSS3 yang hebat. Ia boleh memberikan reka bentuk anda lebih mendalam dan dimensi. Walau bagaimanapun, pada pelayar IE, atribut ini tidak disokong sama ada. Pelayar IE hanya boleh mensimulasikan ini melalui penapis.

Penyelesaian: Gunakan penggodaman JavaScript atau CSS untuk menyelesaikan masalah bayang-bayang. Harta bayangan juga boleh dikendalikan dengan mudah menggunakan jQuery. Melalui Hack CSS, anda boleh menggunakan sifat seperti -webkit-box-shadow, -moz-box-shadow, -khtml-box-shadow, box-shadow.htc untuk menyesuaikan diri dengan pelayar IE yang tidak menyokong bayang-bayang.

3. Latar belakang kecerunan (kecerunan)

Latar belakang kecerunan ialah satu lagi sifat popular CSS3. Ia boleh menjadikan tapak web anda kelihatan lebih bergaya dan cantik. Tetapi pelayar IE tidak menyokong kecerunan linear dan kecerunan jejarian.

Penyelesaian: Gunakan kod CSS atau kod JavaScript untuk menyelesaikan masalah latar belakang kecerunan. Anda boleh menggunakan atribut penapis untuk mencapai latar belakang kecerunan, tetapi ini memerlukan menulis beberapa kod yang membosankan. Anda juga boleh menggunakan sifat imej latar belakang dan bukannya latar belakang kecerunan. Anda juga boleh menggunakan beberapa alatan sumber terbuka seperti CSS3Pie untuk menyesuaikan latar belakang kecerunan.

4. Ubah (transformasi)

Transformasi ialah alat berkuasa dalam CSS3, yang boleh mencondongkan, memutar, menskala dan kesan lain pada elemen. Walau bagaimanapun, pada pelayar IE, sokongan ubah bentuk tidak lengkap.

Penyelesaian: Gunakan kod CSS atau kod JavaScript untuk menyelesaikan masalah ubah bentuk. Transformasi boleh dicapai menggunakan atribut penapis, tetapi ini memerlukan menulis beberapa kod yang membosankan.

5. Pertanyaan media

Pertanyaan media ialah sifat CSS3 yang bertindak balas berdasarkan saiz tetingkap penyemak imbas yang berbeza. Walau bagaimanapun, pelayar IE hanya menyokong IE9 dan ke atas.

Penyelesaian: Gunakan pemalam pertanyaan media, seperti Respond.js, Hover.css, Modernizr, dll. Pemalam ini boleh menyelesaikan masalah ketidakserasian IE dengan berkesan.

Ringkasan:

Artikel ini memperkenalkan secara ringkas sifat CSS3 pelayar IE yang tidak serasi dan penyelesaiannya. Apabila mereka bentuk halaman web, kita harus mengelakkan atribut CSS3 yang tidak serasi dengan pelayar IE dan menggunakan penyelesaian yang berkaitan untuk mencapainya. Kod CSS Hack dan JavaScript boleh menyelesaikan isu keserasian kami dan pemalam seperti Respond.js, Hover.css dan Modernizr boleh menjadikan CSS3 sesuai untuk semua penyemak imbas. Kita harus menggunakan alat ini untuk menjadikan reka bentuk kita lebih cantik dan moden.

Atas ialah kandungan terperinci Teroka sifat CSS3 yang tidak serasi dengan pelayar IE. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!