รูปแบบกล่อง: Internet Explorer เทียบกับ W3C


25

วันนี้ปัญหาของInternet Explorer Box Modelส่วนใหญ่ไม่ใช่ปัญหา นักพัฒนาเว็บส่วนใหญ่วาง<!DOCTYPE>แท็กเพื่อบังคับใช้การปฏิบัติตามมาตรฐานและไม่มีใครสนใจเรื่องการสนับสนุน Internet Explorer 5.5 อีกต่อไป

อย่างไรก็ตามนักพัฒนาซอฟต์แวร์บางรายเกิดข้อโต้แย้งเชิงแนวคิดในการป้องกันโมเดลกล่อง IE พวกเขาอ้างว่าโมเดลกล่อง IE นั้น "ใช้งานง่าย" มากกว่ารุ่น W3C เนื่องจากรุ่น W3C วัดเนื้อหาของกล่องในขณะที่รุ่น IE วัดขนาดกล่องเอง:

ป้อนคำอธิบายรูปภาพที่นี่

ฉันสามารถเห็นมุมมองของพวกเขา แต่โดยพื้นฐานแล้วมันเป็นข้อโต้แย้งส่วนตัวและสิ่งที่สำคัญที่สุดคือการปฏิบัติตามมาตรฐาน

อย่างไรก็ตามเมื่อเร็ว ๆ นี้ผมได้มาชอบรูปแบบกล่อง IE ที่จริงจังในทางปฏิบัติด้วยเหตุผล รูปแบบกล่อง W3C ทำให้ยากต่อการปรับขนาดองค์ประกอบให้มีความกว้างพิกเซลบนหน้าจอที่แน่นอนขององค์ประกอบอื่น เหตุผลก็คือstyle.widthคุณสมบัติขององค์ประกอบไม่ได้คำนึงถึงขนาดบนหน้าจอทั้งหมดขององค์ประกอบ: คุณต้องคำนึงถึงเส้นขอบและช่องว่างภายในเพิ่มเติมด้วย นี่ไม่ใช่ปัญหาหากองค์ประกอบทั้งสองใช้คลาส CSS เดียวกัน แต่ถ้ามีคลาส CSS ที่แตกต่างกันสิ่งนี้อาจท้าทายอย่างไม่น่าเชื่อ

สมมติว่าเรามีสอง divs: A และ B A นั้นเป็นรหัสที่ยากใน html เป็น 400px div ในขณะที่ B ถูกสร้างขึ้นแบบไดนามิกโดยใช้ Javascript เห็นได้ชัดว่าเราต้องการให้ B เป็นความกว้างที่แน่นอนของ A. ภายใต้โมเดล IE Box รุ่นเก่านี่เป็นเรื่องเล็กน้อย เราก็บอกว่า: หรือแม้กระทั่ง B.style.width = A.style.widthB.style.width = A.offsetWidth + "px"

แต่ด้วยรูปแบบกล่อง W3C มันไม่ง่ายเลย ตอนนี้เรายังต้องกังวลเกี่ยวกับสไตล์ชีท ถ้า B มีคลาส CSS เดียวกับ A เราสามารถพูดB.style.width = A.style.widthได้ แต่ถ้ามันไม่ได้ - และเราอาจไม่ต้องการเหตุผลด้านสุนทรียภาพ - เรากำลังมีปัญหา ตอนนี้เราต้องคำนึงถึงจำนวนพิกเซลทั้งหมดในเส้นขอบและการขยายของทั้ง A และ B ซึ่งอาจเป็นเรื่องยากโดยเฉพาะอย่างยิ่งหากมีการระบุเส้นขอบและช่องว่างภายในหน่วยที่ไม่สอดคล้องกัน (เหตุการณ์ที่เกิดขึ้นทั่วไปเนื่องจากเส้นขอบ อาจระบุเป็น EMS) จากนั้นเราก็พบกับงานที่ไม่สามารถแปลงเป็นหน่วยทั่วไปได้ (em เป็น px หรือ px เป็น em) ทั้งหมดนี้เพื่อรับ divs สองตัวเพื่อจัดเรียงให้ตรงบนหน้าจอ

โดยพื้นฐานแล้วโมเดลของกล่อง W3C บังคับให้เราพิจารณาปัญหาชายแดน CSS และปัญหาการขยายเมื่อเรากำหนดขนาดขององค์ประกอบในขณะที่รุ่นกล่อง IE ไม่เนื่องจากความกว้างวัดขนาดทั้งหมดของกล่อง - end) แทนที่จะเป็นเนื้อหาของกล่อง สิ่งนี้ทำให้ง่ายขึ้นมากในการปรับขนาดองค์ประกอบที่สัมพันธ์กัน

ทั้งหมดนี้ดูเหมือนจะเป็นเหตุผลที่ทรงพลังพอสมควรที่จะสนับสนุนรูปแบบกล่อง IE มากกว่ารุ่น W3C (อย่างน้อยก็ในเชิงแนวคิด - แน่นอนว่าในทางปฏิบัติแล้วรูปแบบกล่อง IE นั้นตายแล้ว)

คำถาม : ทำไม W3C ถึงเลือกกล่องรุ่นนี้ มีข้อดีบางอย่างของกล่องรุ่น W3C ที่ฉันไม่เห็นหรือเปล่า? หรือฉันแค่พูดเกินจริงปัญหาที่นี่?


3
แม้ว่าโดยทั่วไปแล้วฉันจะไม่ชอบสิ่งที่ IE ทำแตกต่างกัน แต่ข้อโต้แย้งนี้น่าสนใจ
FUZxxl

8
คุณเพียงแค่เน้นความล้มเหลวของ CSS โดยทั่วไปในการอธิบายโครงร่างและใช่ IE มีรูปแบบกล่องที่ดีกว่าจริงๆ
Ryathal

11
ในกรณีที่คุณไม่ทราบคุณสามารถระบุรูปแบบกล่องที่จะใช้ในไฟล์ CSS ของคุณ ใช้แอตทริบิวต์ "box-sizing" และตั้งค่าเป็น "border-box" หากคุณต้องการใช้รูปแบบกล่อง IE
FishBasketGordo

คำตอบ:


9

ตัวเลือกว่าจะรวมการขยายและขอบเข้าไปในความกว้างหรือไม่ สิ่งเดียวที่มันสำคัญคือการสร้างเค้าโครงหลายคอลัมน์ อย่างไรก็ตามคุณควรคำนึงถึงความจริงที่ว่าผู้คนใช้ตารางสำหรับการจัดวางในเวลานั้น ดังนั้นสำหรับพวกเขาแล้วความกังวลดูเหมือนจะไม่สำคัญพอและพวกเขาคิดว่าการระบุความกว้างที่แน่นอนว่าเนื้อหานั้นจะครอบครองใน CSS นั้นมีค่ามากกว่า

สำหรับนักพัฒนาในปัจจุบันสถานการณ์ดูเหมือนแตกต่างอย่างสิ้นเชิงเมื่อพวกเขาใช้ CSS สำหรับเลย์เอาต์และพวกเขาต้องจัดการกับ CSS Boxing model โชคดีที่เรามีความสามารถในการแทนที่กฎการชกมวยดังนั้นในกรณีส่วนใหญ่กฏง่ายๆที่ด้านบนของสไตล์ชีทของคุณจะทำงานได้ดี:

* {
    -mox-box-sizing: border-box;
    box-sizing: border-box;
}

หากต้องการอ้างอิงJeff Kaufman ในหัวข้อ :

ระบุว่าข้อมูลจำเพาะระบุไว้ในลักษณะอื่น แต่สัญญาณที่ส่งไปยัง Microsoft เพื่อนำการตีความที่ผิดมาใช้จะไม่ดีสำหรับเว็บ Microsoft กำลังใช้วิธีการโอบกอดขยายและระงับซึ่งพวกเขาตั้งใจทำผลิตภัณฑ์ที่ทำหน้าที่แตกต่างจากคู่แข่งเพื่อล็อคผู้ใช้ในเวอร์ชัน Microsoft พวกเขาเข้ามาใกล้มากที่จะประสบความสำเร็จกับเว็บ: จากประมาณปี 2000 ถึง 2005 IE ได้รับความนิยมมากจนหลาย ๆ เว็บไซต์ออกแบบมาเพื่อมัน การนำแนวทางของ IE มาใช้ที่นี่อาจบอกกับ Microsoft ว่า "คุณสามารถทำสิ่งที่คุณต้องการกับ IE ได้และเราจะปรับมาตรฐานเพื่อให้ถูกกฎหมาย"

ดังนั้นโมเดลบ็อกซ์จึงตกเป็นเหยื่อของการดิ้นรนต่อสู้ระหว่าง W3C และ Microsoft


1
*ฉันต้องการหลีกเลี่ยงการแทนที่ระดับโลกที่มี ฉันควรจะเลือกแทนที่ในสถานที่ที่จำเป็น
CodesInChaos
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.