ได้มีโอกาสเขียนเว็บโดยใช้ CSS เป็นหลักแล้วเจอปัญหาเกี่ยวกับการกำหนด padding ใน <div> ปัญหาที่ว่านี้ก็คือ การแสดงผล padding ในแต่ละ browser มันไม่เหมือนกัน ผมเชื่อว่าหลาย ๆ คนที่ทำเว็บก็คงเคยเจอปัญหานี้เหมือนกัน ยกตัวอย่าง web browser คู่ปรับยอดนิยม ระหว่าง IE กับ FireFox โดยตัว IE เอง จะวัดความกว้างของ content จากขอบด้านหนึ่งของ container ไปยังอีกด้านหนึ่ง ในขณะที่ Firefox จะวัดจากตัว content ด้านใน container เอง ดังนั้นทำให้เมื่อเรากำหนดความกว้างที่ 300 pixels และกำหนด padding ซ้ายและขวาข้างละ 20 pixels IE จะใช้เนื้อที่จริง 300 pixels และเนื้อที่แสดงเนื้อหาเหลือแค่ 260 pixels ส่วน FireFox จะใช้เนื้อที่จริง 340 pixels และมีเนื้อที่แสดงเนื้อหา 300 pixels
ปัญหานี้สามารถแก้ไขได้โดยการกำหนด box model ให้เหมือนกันด้วย css เพื่อให้ตัว render หน้าเว็บ ทำงานไปในทางเดียวกัน สิ่งที่ต้องเพิ่มลงไปใน style ของ object ที่เราต้องการกำหนดคือ
-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;
การกำหนดค่าแบบนี้ จะเป็นการสั่งให้ browser คำนวณความกว้างของ content จากขอบของ container เหมือนกับที่ IE ทำนั่นเอง
เพื่อให้เห็นภาพได้ชัดเจนมากขึ้น ผมว่าเราลองไปดูตัวอย่างใน LIVE DEMO กันเลยดีกว่าครับ
แล้วถ้าจะสั่งให้ IE คำนวนแบบ Firefox ใช้ว่าอะไรอ่ะ
content-box
แล้ว
-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;
3 อันนี้ ต้องใส่ทั้ง 3 อันเลยรึป่าวครับ ถึงจะทำให้ทุก broswer เหมือนกันอ่ะครับ
แม่นครับ
ปวดหัวทุกที่เจอ Css
แต่ก็สนุกดีนะครับ
ใส่ไว้ใน css ยังไงอ่ะคับ ประมาณนี้หรือป่าวคับ
html {
background-attachment:
fixed;background-image:url(images/bg-blue.jpg);
-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;
}
ใช่ครับ แต่ใส่กับ html มันจะใช้ได้กับ tag html นะครับ
ใช้กับ tag หรือ element ที่ต้องการดีกว่าครับ