Mengapa Penyemak Imbas Berbeza dalam Cara Mereka Mengira Lebar Elemen HTML Termasuk Padding?

Soalan: Variasi dalam Pengiraan Lebar Elemen Antara Pelayar

Dalam pelayar web yang berbeza, terdapat percanggahan dalam cara lebar elemen HTML dikira berkenaan dengan padding. Dalam Internet Explorer, padding disertakan dalam ukuran lebar, manakala dalam Firefox, ia tidak.

Memahami Model Kotak

Untuk memahami tingkah laku ini, kita perlu tahu tentang model kotak dalam CSS. Setiap elemen dalam HTML diberikan satu kotak, yang mempunyai empat bahagian:

• Kawasan Kandungan: Mengandungi kandungan sebenar elemen tersebut.
• Padding: Ruang di sekeliling kandungan.
• Sempadan: Garisan di sekeliling pelapik.
• Margin: Ruang di luar sempadan.

Model "Kotak-Kandungan" Standard

Kebanyakan penyemak imbas moden, termasuk Firefox, menggunakan model "kotak kandungan" standard. Dalam model ini, lebar elemen hanya termasuk kawasan kandungan, tidak termasuk pelapik dan sempadan.

Model "Border-Box" Bukan Standard

Internet Explorer, dalam versi lama, menggunakan model "kotak sempadan" bukan standard. Dalam model ini, lebar elemen termasuk pelapik dan sempadan, menjadikan elemen kelihatan lebih besar.

Menjadikan Penyemak Imbas Konsisten

Untuk menjadikan tingkah laku konsisten merentas penyemak imbas, kami boleh menggunakan sifat bersaiz kotak. Sifat ini membolehkan kami menentukan model kotak yang harus digunakan oleh penyemak imbas.

* {
  box-sizing: border-box;
}

Dengan menetapkan saiz kotak kepada kotak sempadan, kami memaksa semua penyemak imbas menggunakan model ini di mana lebarnya termasuk pelapik dan sempadan. Ini akan menjadikan elemen kelihatan sama saiz dalam kedua-dua Internet Explorer dan Firefox.

Nota Tambahan:

• Opera memerlukan pengisytiharan khusus untuk menyokong saiz kotak : border-box.
• Pelayar WebKit (Safari dan Chrome) tidak menyokong kotak padding-box model.
• Versi lama IE mungkin memerlukan jenis dokumen yang sah dan pengepala yang sesuai untuk mematuhi model kotak standard.

Atas ialah kandungan terperinci Mengapa Penyemak Imbas Berbeza dalam Cara Mereka Mengira Lebar Elemen HTML Termasuk Padding?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!