Bagaimanakah Saya Boleh Memastikan Lebar Elemen Konsisten Merentasi Pelayar Berbeza, Mempertimbangkan Padding?

Keserasian Lebar Elemen dan Padding Merentas Penyemak Imbas

Dalam bidang pembangunan web, cabaran biasa timbul apabila cuba memastikan tingkah laku yang konsisten dalam elemen pemaparan merentas pelbagai pelayar. Satu percanggahan sedemikian adalah berkaitan dengan kemasukan pelapik dalam pengiraan lebar elemen.

Internet Explorer lwn. Firefox: The Box Model Disrepancy

Internet Explorer telah menggunakan "sempadan" secara sejarah -box", yang mentafsirkan lebar elemen sebagai termasuk pelapik. Sebaliknya, penyemak imbas yang mematuhi piawaian web, seperti Firefox, menggunakan model "kotak kandungan", tidak termasuk pelapik daripada pengiraan lebar.

Mencapai Konsistensi Merentas Penyemak Imbas

Untuk menyegerakkan tingkah laku antara penyemak imbas dan menguatkuasakan model "kotak kandungan" standard, langkah berikut boleh diambil:

• Gunakan Penanda Sah dan Doctype: Pastikan penanda HTML yang betul dan sertakan pengisytiharan DOCTYPE yang sah pada permulaan dokumen anda.
• Nyatakan "Content-Box": Gunakan CSS untuk mentakrifkan secara eksplisit model kotak "content-box" menggunakan yang berikut property:

* { box-sizing: content-box; }

Meningkatkan Keserasian dengan Penyemak Imbas Lama

Untuk keserasian dengan versi Internet Explorer yang lebih lama, model "border-box" boleh digunakan secara eksplisit dengan sifat awalan vendor berikut:

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

Nota pada Penyemak Imbas WebKit

pelayar berasaskan WebKit (Safari dan Chrome) tidak menyokong model kotak "kotak padding", yang bermaksud pelapik akan sentiasa disertakan dalam pengiraan lebar elemen.

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