Perkara yang perlu dilakukan jika gaya css tidak serasi

Dengan perkembangan berterusan teknologi rangkaian, reka bentuk web menjadi semakin penting. CSS, sebagai bahasa untuk mereka bentuk gaya halaman web, telah digunakan secara meluas. Walau bagaimanapun, seperti teknologi lain, gaya CSS tidak terlepas daripada beberapa isu keserasian. Isu keserasian ini akan menyebabkan halaman mempunyai kesan yang berbeza dalam penyemak imbas yang berbeza, menyebabkan ketidakselesaan kepada pengguna. Artikel ini akan memperkenalkan secara terperinci punca dan penyelesaian ketidakserasian gaya CSS.

1. Sebab ketidakserasian gaya CSS

1 Pelayar yang berbeza mempunyai kaedah pelaksanaan yang berbeza

Pelayar yang berbeza mempunyai kaedah pelaksanaan yang berbeza di sana adalah juga perbezaan tertentu dalam pelaksanaan, yang akan membawa kepada gaya CSS yang sama menunjukkan kesan yang berbeza pada pelayar yang berbeza.

Sebagai contoh, sesetengah penyemak imbas mengira model kotak CSS secara berbeza, yang mungkin menyebabkan saiz yang sama dipaparkan secara berbeza dalam penyemak imbas yang berbeza.

2. Penyemak imbas mempunyai sokongan yang berbeza untuk sifat CSS

Sesetengah sifat CSS yang lebih baharu hanya disokong oleh sesetengah penyemak imbas, tetapi bukan oleh penyemak imbas lama, yang akan menyebabkan gaya CSS yang sepadan menjadi paparan pelayar yang berbeza kesan yang berbeza.

Sebagai contoh, sesetengah atribut dalam CSS3 hanya disokong oleh sesetengah penyemak imbas Contohnya, atribut transform hanya disokong oleh Safari, Chrome dan Firefox 3.5+, tetapi tidak disokong oleh versi di bawah IE9.

3. Versi penyemak imbas yang berbeza

Versi penyemak imbas yang berbeza mempunyai sokongan yang berbeza untuk CSS akan terdapat perbezaan tertentu antara penyemak imbas baharu dan penyemak imbas lama.

Sebagai contoh, sokongan IE6 untuk imej PNG tidak lengkap, manakala IE7 menyokong imej telus PNG.

2. Penyelesaian kepada gaya CSS yang tidak serasi

1 Gunakan gaya CSS yang serasi dengan penyemak imbas

Kami boleh menambah beberapa ciri keserasian penyemak imbas pada kod gaya CSS supaya penyemak imbas berbeza. boleh menghuraikan gaya yang sama dengan betul.

Contohnya:

-webkit-box-shadow: #333 3px 3px 3px;
-moz-box-shadow: #333 3px 3px 3px;
box-shadow : #333 3px 3px 3px;

Kod ini bermaksud menambah atribut bayang-kotak dan menggunakan tiga awalan penyemak imbas yang berbeza untuk mewakili Webkit, Mozilla dan CSS3 standard masing-masing. Dengan cara ini, pelayar yang berbeza boleh mengenali gaya ini dengan betul.

2. Gunakan Tetapan Semula CSS

Tetapan Semula CSS ialah kaedah untuk mengosongkan gaya lalai penyemak imbas dan memastikan gaya tersebut dipaparkan dalam penyemak imbas yang berbeza menunjukkan hasil yang konsisten.

Contohnya:

/ Tetapan Semula CSS /
badan{

margin:0;
padding:0;

}

h1,h2, h3 ,h4,h5,h6{

font-size:100%;
font-weight:normal;

}

a{

text-decoration:none;

}

Kod ini akan mengalih keluar jidar badan dan padding, serta gaya lalai penyemak imbas seperti garis bawah teg, untuk memastikan halaman dipaparkan secara konsisten dalam penyemak imbas yang berbeza.

3. Gunakan CSS Hack

CSS Hack ialah kaedah penulisan CSS untuk penyemak imbas tertentu Ia membolehkan anda menentukan gaya khas untuk pelayar tertentu untuk mencapai Kesan istimewa.

Contohnya:

/ IE6 Hack /

• html #div {
  ketinggian:100px;
  }

Kod ini bermakna jika anda menjalankan pelayar IE6, ketinggian elemen div akan ditetapkan kepada 100px, manakala pelayar lain tidak akan melaksanakan kod ini.

4. Gunakan prapenyusun CSS

Prapenyusun CSS boleh menyusun kod CSS menjadi kod yang boleh dikenali oleh penyemak imbas. Dengan menggunakan prapenyusun CSS, kami boleh menggunakan beberapa sintaks dan pembolehubah lanjutan untuk mengurus dan mengekalkan kod CSS dengan lebih baik.

Contohnya:

/ Pembolehubah sass/
$warna-utama: #333;

badan{

color: $primary-color;

}

Kod ini menunjukkan bahawa pembolehubah $primary-color ditakrifkan dan kemudian digunakan dalam elemen badan. Dengan menggunakan pembolehubah, kita boleh mengubah suai sifat seperti warna dengan mudah tanpa perlu mengubah suai gaya setiap elemen secara manual.

Ringkasnya, ketidakserasian gaya CSS adalah masalah yang agak biasa, tetapi kita boleh menyelesaikan masalah ini melalui beberapa kaedah. Kami boleh menggabungkan kaedah yang diterangkan supaya pelbagai pelayar boleh memaparkan halaman kami dengan betul.

Atas ialah kandungan terperinci Perkara yang perlu dilakukan jika gaya css tidak serasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!