Bincangkan perbezaan cara pelayar berbeza menghuraikan CSS

Penyemak imbas yang berbeza mempunyai tafsiran CSS yang berbeza, yang sering menyusahkan pembangun bahagian hadapan, terutamanya mereka yang mahu tapak web mereka mempunyai penampilan yang sama pada penyemak imbas yang berbeza. Artikel ini akan membincangkan perbezaan cara pelayar yang berbeza menghuraikan CSS dan menyediakan beberapa penyelesaian.

1. Perbezaan dalam tafsiran CSS oleh penyemak imbas

Dalam spesifikasi standard CSS, nilai berbeza sifat CSS ditakrifkan dengan jelas. Walau bagaimanapun, terdapat perbezaan dalam cara penyemak imbas yang berbeza menghuraikan sifat CSS, yang menghasilkan kesan pembentangan halaman yang berbeza antara penyemak imbas.

Sebagai contoh, apabila lebar elemen ditetapkan kepada 100px, ia mungkin dipaparkan dengan lebar 100px dalam penyemak imbas Chrome, tetapi dalam penyemak imbas IE, ia mungkin dipaparkan dengan lebar 105px. Jurang ini boleh menjejaskan reka letak dan reka letak keseluruhan halaman.

2. Penyelesaian

Untuk menyelesaikan masalah ini, kita perlu mengambil beberapa kaedah untuk menjadikan tapak web kelihatan sama pada pelayar yang berbeza.

a. Cipta reset.css

Apabila membangunkan tapak web, kami boleh mencipta fail reset.css yang berbeza untuk penyemak imbas yang berbeza. Fail reset.css mengandungi satu siri sifat CSS dan takrifan yang digunakan untuk menyatukan tafsiran lalai sifat CSS oleh penyemak imbas yang berbeza dengan lebih konsisten.

Contohnya, kita boleh memusnahkan margin lalai dan padding semua penyemak imbas dengan kod CSS berikut:

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
 display: block;
}
body {
 line-height: 1;
}
ol,
ul {
 list-style: none;
}
blockquote,
q {
 quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}

b. Gunakan awalan CSS

Semasa menulis CSS, kita boleh menambah awalan CSS pada sifat tertentu untuk menunjukkan bahawa sifat ini disokong oleh penyemak imbas tertentu. Sebagai contoh, kita boleh menggunakan kod berikut dalam CSS untuk menentukan sokongan untuk warna kecerunan dalam penyemak imbas Webkit dan pelayar terbitannya:

background: -webkit-linear-gradient(red, blue);

Begitu juga, kami juga boleh menetapkan awalan yang sepadan untuk penyemak imbas Mozilla:

background: -moz-linear-gradient(red, blue);

c. Gunakan pengesanan penyemak imbas

Kami boleh menggunakan JavaScript dan bahasa skrip lain untuk mengesan penyemak imbas yang digunakan oleh pengguna, dan memuatkan pelayar yang berbeza berdasarkan gaya CSS atau Skrip JavaScript. Sebagai contoh, kod JS berikut boleh mengesan sama ada versi penyemak imbas ialah IE6:

if(navigator.userAgent.indexOf('MSIE 6.0') !== -1 ) {
 // TODO: IE6 specific code
}

Tiga kaedah di atas boleh menyelesaikan secara berkesan perbezaan dalam penghuraian CSS oleh penyemak imbas yang berbeza, supaya tapak web boleh mencapai matlamat yang sama pada pelayar yang berbeza.

Kesimpulan

Semasa proses pembangunan web, pembangun bahagian hadapan perlu mengambil kira perbezaan dalam penghuraian CSS antara penyemak imbas yang berbeza untuk memastikan tapak web tersebut mempunyai keserasian tertentu. Melalui kaedah yang disediakan di atas, kami boleh menyelesaikan masalah ini dengan lebih baik supaya laman web dapat mencapai kesan bersatu pada pelayar yang berbeza.

Atas ialah kandungan terperinci Bincangkan perbezaan cara pelayar berbeza menghuraikan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!