บทช่วยสอน CSS 3: ทำความเข้าใจกับคุณสมบัติขนาดกล่อง
ผู้เขียน：Eve Cole
เวลาอัปเดต：2009-06-12 17:54:27
เมื่อพูดถึงข้อบกพร่องของ IE ตัวอย่างที่ฉาวโฉ่ก็คือการตีความ "box model" ที่ไม่ถูกต้อง: ใน IE5.x และ IE6/7 ในโหมด Quirks ทั้งเส้นขอบและช่องว่างภายในจะรวมอยู่ในความกว้าง สิ่งนี้เพิ่มปัญหาอย่างมากให้กับการทำงานของวิศวกรส่วนหน้า ทุกกล่องที่ต้องกำหนดขนาดต้องได้รับการพิจารณา: มันทำให้เกิด "บั๊กโมเดลกล่อง" หรือไม่?
ในเวลาเดียวกัน เนื่องจากเบราว์เซอร์กลุ่มอื่นปฏิบัติตามมาตรฐาน เมื่อเรากำหนดกล่องที่แสดงในพื้นที่จำกัดอย่างถูกต้อง เราจึงต้องคำนวณด้วย: พื้นที่ที่เหลือสำหรับเบราว์เซอร์นั้นมีขนาดใหญ่มากเท่านั้น โดยไม่รวมเส้นขอบและช่องว่างภายใน เราควรเขียนว่าความกว้างของมันคืออะไร?
สถานการณ์นี้ได้รับการปรับปรุงในยุค CSS3 ด้วยคุณสมบัตินี้ที่เรียกว่า box-sizing ซึ่งมีค่าสองค่าคือ "content-box" และ "border-box"
เมื่อกำหนด box-sizing: content-box; การตีความของเบราว์เซอร์เกี่ยวกับโมเดล box เป็นไปตามมาตรฐาน W3C ที่เรารู้จักมาก่อน
เมื่อกำหนดขนาดกล่อง: border-box; การตีความของเบราว์เซอร์ของรุ่นกล่องจะเหมือนกับ IE6;
เหตุใดคุณลักษณะนี้จึงกล่าวว่า "สาย"? แม้ว่าการตีความโมเดลกล่องของ IE จะไม่เป็นไปตามข้อกำหนดของ W3C แต่ก็มีข้อดีเช่นกัน: ไม่ว่าคุณจะเปลี่ยนค่าของเส้นขอบและช่องว่างภายในอย่างไร ก็จะไม่ทำให้ขนาดรวมของกล่องเปลี่ยนแปลง และจะ ไม่รบกวนการจัดวางโดยรวมของเพจ ในเบราว์เซอร์สมัยใหม่ เช่น Firefox หากเราต้องการเปลี่ยนค่าของช่องว่างภายใน เราจะต้องคำนวณความกว้างของกล่องใหม่ ตอนนี้ IE6 ตายไปแล้ว คุณสมบัติ CSS นี้เลยกำหนดชำระไปนานแล้ว
หากต้องการลองใช้คุณสมบัติใหม่นี้ โปรดใช้ -moz-box-sizing สำหรับ Firefox ใช้ -webkit-box-sizing สำหรับ Safari/WebKit และใช้ box-sizing สำหรับ Opera
