Bagaimanakah Saya Boleh Memastikan Lebar Elemen Konsisten Merentasi Pelayar?

Lebar Elemen dan saiz kotak:** Menyatukan Gelagat Penyemak Imbas

Dalam reka bentuk web, lebar elemen boleh menjadi sumber kekeliruan kerana tafsiran yang berbeza-beza oleh pelayar yang berbeza. Internet Explorer dan Firefox, misalnya, telah mengendalikan aspek ini secara berbeza dari segi sejarah.

Model Kotak Sempadan IE lwn Model Kotak Kandungan FF

Secara tradisinya, Internet Explorer digunakan model "kotak sempadan", di mana lebar elemen termasuk kedua-dua pelapik dan sempadan. Oleh itu:

foo {

lebar: 10em;
padding: 2em;
jidar: 1em;
}

akan menjadikan elemen 10em lebar.

Sebaliknya, Firefox dan penyemak imbas lain yang mematuhi piawaian lalai kepada model "kotak kandungan". Di sini, lebar elemen tidak termasuk pelapik dan sempadan. Jadi, CSS yang sama akan menghasilkan elemen 16em lebar:

foo {

lebar: 10em;
padding: 2em;
jidar: 1em;
}

Mencapai Ketekalan

Untuk menyelaraskan gelagat merentas penyemak imbas, pembangun boleh menggunakan sifat bersaiz kotak. Dengan menetapkannya kepada "kotak sempadan":

• {
  saiz kotak: kotak sempadan;

atau:<br>*{

box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box

}

Moden pelayar yang mematuhi piawaian, termasuk Firefox, boleh dipaksa untuk menggunakan model "kotak sempadan". Pengisytiharan ini turut menyokong penyemak imbas berasaskan Opera dan Webkit seperti Chrome.

Walau bagaimanapun, ambil perhatian bahawa Webkit tidak menyokong model "kotak padding" melalui sebarang pengisytiharan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memastikan Lebar Elemen Konsisten Merentasi Pelayar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!