Bagaimana untuk menjadi serasi dengan css

Dalam reka bentuk web moden, teknologi HTML dan CSS pada asasnya digunakan, bagaimanapun, dalam persekitaran pembangunan sebenar, selalunya perlu untuk serasi dengan penyemak imbas lama. Pelayar IE (Internet Explorer) ialah pelayar web yang dibangunkan oleh Microsoft Walaupun ia telah ditinggalkan oleh Microsoft, ia masih digunakan secara meluas oleh banyak syarikat korporat dan pengguna individu. Untuk membolehkan halaman web berjalan seperti biasa pada pelayar IE, kita perlu serasi dengan IE CSS.

1. Isu dengan IE CSS

Apabila bercakap tentang keserasian penyemak imbas, IE CSS telah menjadi salah satu isu yang paling penting. Kaedah pemaparan CSS oleh pelayar IE sangat berbeza daripada pelayar lain Masalah terbesar ialah sokongan pelayar IE yang tidak mencukupi untuk atribut CSS3, seperti sudut bulat, dsb. Apabila menulis gaya CSS, jika anda menggunakan beberapa sifat CSS3 yang agak baharu tanpa mengambil kira keserasian pelayar IE, masalah seperti kekeliruan gaya dan paparan tidak normal akan berlaku dalam pelayar IE, yang menjejaskan pengalaman pengguna.

2. Isu keserasian CSS IE biasa

1. Isu saiz kotak

Saiz kotak ialah atribut baharu dalam CSS3, digunakan untuk menetapkan model kotak elemen . Dalam penyemak imbas standard, saiz kotak lalai kepada kotak kandungan, manakala dalam IE, saiz kotak lalai kepada kotak sempadan, iaitu lebar model kotak termasuk jidar dan pelapik. Jika kami tidak menetapkan model kotak secara eksplisit dalam helaian gaya, pengecualian paparan gaya akan berlaku.

Penyelesaian: Untuk mengelakkan masalah ini, kita perlu menetapkan model kotak elemen secara eksplisit dalam helaian gaya, contohnya menggunakan saiz kotak: kotak sempadan;.

2. Masalah terapung

Dalam penyemak imbas IE, elemen terapung akan mempunyai kesan pemaparan yang berbeza, dan akan terdapat beberapa masalah semasa pemaparan. Sebagai contoh, elemen terapung akan menyebabkan ketinggian elemen induk menjadi 0, menyebabkan masalah seperti elemen bertindih.

Penyelesaian: Anda boleh menggunakan limpahan: tersembunyi; atau jelas: kedua-duanya pada elemen terapung untuk mengelakkan masalah ini.

3. Masalah Ketelusan

Dalam IE, atribut kelegapan hanya disokong dalam IE9 dan ke atas, tetapi tidak dalam IE8 dan ke bawah. Jika kita menggunakan atribut kelegapan dalam helaian gaya, ia akan menjadi tidak sah dalam IE8 dan ke bawah.

Penyelesaian: Anda boleh menggunakan penapis: alpha(opacity=100); dalam helaian gaya dan bukannya atribut kelegapan.

4. Masalah pemusatan menegak

Dalam IE, kaedah untuk mencapai pemusatan menegak adalah berbeza daripada pelayar moden yang lain. Dalam IE, kita perlu menetapkan atribut paparan elemen induk kepada sel jadual, tetapi dalam penyemak imbas moden yang lain, kita boleh terus menggunakan susun atur fleksibel untuk mencapai pemusatan menegak.

Penyelesaian: Tambahkan paparan: sel jadual; dan penjajaran menegak: tengah pada elemen induk untuk mencapai pemusatan menegak.

5. Masalah fon

Dalam IE, masalah keserasian fon Cina lebih menonjol, kerana pelayar yang berbeza mempunyai perbezaan yang besar dalam menghasilkan fon Cina. Dalam IE, jika kita tidak menetapkan fon, fon Songti Cina akan digunakan secara lalai.

Penyelesaian: Gunakan atribut keluarga fon dalam helaian gaya untuk menyatakan secara eksplisit susunan fon Cina dan Inggeris, contohnya, keluarga fon: "Microsoft Yahei", "Helvetica Neue", Helvetica, Roboto, sans-serif ;.

3. Gunakan penggodaman CSS dengan sewajarnya

Godam CSS ialah kaedah yang digunakan untuk menyelesaikan masalah keserasian CSS dalam penyemak imbas yang berbeza. Godam CSS biasa termasuk ulasan bersyarat, keutamaan pemilih, awalan atribut, dsb.

1. Komen bersyarat

Ulasan bersyarat ialah kaedah ulasan yang hanya berkuat kuasa dalam pelayar IE. Apabila pelayar IE memaparkan HTML, ia akan mengabaikan kandungan di luar ulasan bersyarat dan hanya akan memaparkan kandungan dalam ulasan bersyarat.

2 , Keutamaan pemilih

Pada elemen yang sama, pemilih berbeza mempunyai keutamaan berbeza Gaya yang merujuk pemilih berbeza akan diutamakan dalam susunan berikut. Dalam IE, kita boleh menggunakan ciri keutamaan pemilih untuk melaksanakan gaya bersyarat.

1. !atribut yang diisytiharkan penting
2. atribut gaya pada teg
3. pemilih ID
4. pemilih kelas, pemilih atribut, Pemilih kelas pseudo
5. pemilih teg, pemilih unsur pseudo

3. Awalan atribut

Sesetengah atribut CSS mempunyai awalan yang berbeza dalam pelayar yang berbeza, seperti atribut Transform In IE, anda perlu menambah awalan -ms-. Dalam helaian gaya, kita perlu menggunakan awalan atribut untuk memastikan keserasian gaya dalam pelayar yang berbeza.

Penyelesaian: Anda boleh menggunakan alatan seperti autoprefixer untuk membantu menambah awalan sifat CSS secara automatik.

4. Gunakan rangka kerja CSS

Rangka kerja CSS ialah alat pembangunan pesat yang merangkumi pelbagai kaedah pemprosesan keserasian penyemak imbas. Dalam pembangunan sebenar, kita boleh menggunakan pelbagai rangka kerja CSS yang biasa digunakan, seperti Bootstrap, Foundation, dll.

Rangka kerja ini termasuk pelbagai kelas CSS yang biasa digunakan, yang boleh membantu kami melengkapkan pembangunan gaya dengan pantas. Selain itu, rangka kerja ini juga mengambil kira pelbagai isu keserasian penyemak imbas dan boleh membantu kami menyelesaikan pembangunan halaman web dengan lebih cepat.

5

Keserasian CSS IE ialah isu yang tidak boleh diabaikan dalam pembangunan harian Ia adalah pilihan bijak untuk menggunakan ulasan bersyarat, keutamaan pemilih, awalan atribut, rangka kerja CSS dan kaedah lain untuk menyelesaikan isu keserasian dalam penyemak imbas yang berbeza. Apabila mereka bentuk halaman web, kita harus cuba mengelak daripada menggunakan beberapa sifat dan gaya CSS3 baharu, dan menumpukan pada keserasian IE untuk meningkatkan pengalaman menyemak imbas pengguna.

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