ความแตกต่างระหว่าง border:none; และ border:0;

ฉันเชื่อว่ามีคนถามคำถามนี้บนอินเทอร์เน็ต และมีการพูดคุยกันอีกครั้งเมื่อเร็ว ๆ นี้ ฉันต้องการบันทึกความเข้าใจส่วนตัวของฉัน ความแตกต่างระหว่าง border:none ; ประสิทธิภาพทางทฤษฎี ข้อแตกต่างที่สองคือความแตกต่างในความเข้ากันได้ของเบราว์เซอร์

ความแตกต่างด้านประสิทธิภาพ:

[border:0;] แม้ว่าพิกเซลที่ตั้งค่าเป็น "0" สำหรับเส้นขอบจะไม่ปรากฏบนเพจ ตามค่าเริ่มต้นของเส้นขอบ เบราว์เซอร์ยังคงแสดงความกว้างของเส้นขอบ/สีเส้นขอบ ซึ่งก็คือ ค่าหน่วยความจำถูกครอบครอง

[border:none;] ตั้งค่าเส้นขอบเป็น "none" ซึ่งหมายความว่าไม่มีเส้นขอบ เมื่อเบราว์เซอร์แยกวิเคราะห์ "none" มันจะไม่ดำเนินการเรนเดอร์ กล่าวคือ จะไม่ใช้ค่าหน่วยความจำ

ความแตกต่างที่เข้ากันได้:

ความแตกต่างด้านความเข้ากันได้ใช้กับเบราว์เซอร์ IE6, IE7 และปุ่มป้ายกำกับและอินพุตเท่านั้น สถานการณ์นี้จะเกิดขึ้นภายใต้ธีม XP ของ win, win7 และ vista

[border:none;] เมื่อ border เป็น "none" ดูเหมือนว่าเส้นขอบที่ไม่ถูกต้องสำหรับ IE6/7 ยังคงมีอยู่ ดังที่แสดงในตัวอย่างต่อไปนี้ Demo1 :

[border:0;] เมื่อ border เป็น "0" จะให้ความรู้สึกมีประสิทธิภาพมากกว่า "none" เบราว์เซอร์ทั้งหมดจะซ่อนเส้นขอบอย่างสม่ำเสมอ ดังที่แสดงในตัวอย่างต่อไปนี้ Demo2 :

สรุป :

การเปรียบเทียบ border:0; และ border:none; ความแตกต่างอยู่ที่การเรนเดอร์และการไม่มีการเรนเดอร์ ฉันรู้สึกว่าพวกมันมีความสัมพันธ์ที่คล้ายกันกับ display:none; และการมองเห็น:ซ่อนเร้น; ของคุณลักษณะเส้นขอบ แม้ว่าเชื่อกันว่ามีประสิทธิภาพในการเรนเดอร์แตกต่างกัน แต่ก็อาจกล่าวได้ว่าเป็นทางทฤษฎีเท่านั้น

วิธีสร้างเส้นขอบ: ไม่มี; เข้ากันได้อย่างสมบูรณ์? เพียงเพิ่มแอตทริบิวต์พื้นหลังให้กับตัวเลือกเดียวกัน ดังที่แสดงในตัวอย่างต่อไปนี้ Demo3 :

เกี่ยวกับ border:0; และ border:none; โดยส่วนตัวแล้วฉันชอบใช้ border:none; เพราะ border:none; ไม่ได้มีข้อโต้แย้งในแง่ของการใช้ประสิทธิภาพ และความเข้ากันได้สามารถแก้ไขได้ด้วยคุณลักษณะพื้นหลังและไม่ใช่อุปสรรค .