สำรวจข้ามขอบเขตเบราว์เซอร์

แม้ว่าบทความนี้จะดูเป็นหัวข้อที่ยอดเยี่ยม แต่บทความนี้สามารถเรียกได้ว่าเป็นงานอดิเรกสำหรับผู้ที่มีอาการปวดท้อง (เช่น ฉัน~)~ โดยปกติแล้วนักพัฒนาซอฟต์แวร์จะมีวิธีผ่อนคลายเป็นของตัวเอง มันมาจากคำถามเกี่ยวกับเขตแดนที่ใครบางคนถามในฟอรั่ม ดังนั้นฉันจึงตัดสินใจค้นหา ใช้เวลาเขียนบทความไม่นาน แต่ใช้เวลาในการเตรียมภาพนาน ในบทความนี้ เรามาดูกันว่าแต่ละเบราว์เซอร์เข้าใจขอบเขตอย่างไร

เบราว์เซอร์ที่เข้าร่วมในการทดสอบนี้ประกอบด้วยเบราว์เซอร์เกือบทั้งหมดภายใต้ Windows: ie6, ie7, ie8, ie9preview, chrome, firefox, safari, opera, seamonkey แต่ละเวอร์ชันเป็นเวอร์ชันล่าสุดที่ดาวน์โหลดจากอินเทอร์เน็ต และเนื่องจากในการทดสอบนี้ ประสิทธิภาพของ IE678 มีความสม่ำเสมอ และ firefox และ seamonkey ถือเป็นการเลือกที่รักมักที่ชัง ดังนั้นทั้งสองจึงถูกรวมเข้ากับ IE8 และ firefox รูปภาพด้านล่างเป็นภาพหน้าจอของเบราว์เซอร์นี้:

คำสั่งข้างต้นเป็นการกระทำโดยเจตนา เหตุผลจะแสดงในการทดสอบด้านล่าง และภาพหน้าจอจะจัดเรียงตามลำดับนี้ด้วย

ขั้นแรกให้ดูรูปด้านล่าง DIV ขนาด 20X20 จะแสดงในเบราว์เซอร์หกตัว โดยมีเส้นขอบด้านบน: 2px และส่วนที่เหลือคือ 1px ดูเหมือนว่าจะไม่มีความแตกต่าง เนื่องจากความละเอียดอ่อนของ 1px ทำให้เราไม่สามารถให้ความสนใจได้ (อันที่จริง เราไม่จำเป็นต้องสนใจเกี่ยวกับปัญหาทั้งหมดนี้~)

ขั้นแรกทำให้ปัญหาง่ายขึ้น ด้านหนึ่งคือ 2px สามด้านคือ 1px และขยายผลลัพธ์ 5 เท่า เราจะเห็นความแตกต่างนี้ได้อย่างชัดเจน - Opera และ Safari อยู่ตรงข้ามกัน IE8 ขาดแขนและขา และสามคนต่อไปนี้มีความสอดคล้องกัน ~ ที่นี่ ควรสังเกตว่าแถวที่สองของ 3 จะมีผลทีละน้อยที่ทางแยก

บางทีเราควรทำให้เอฟเฟกต์นี้มองเห็นได้ชัดเจนยิ่งขึ้น เมื่อด้านใดด้านหนึ่งเป็นตัวหนา (10px) ลักษณะเฉพาะของ IE8 ก็จะถูกเปิดเผยอย่างชัดเจน โอเปร่าและซาฟารียังคงเป็นญาติกัน แนวร่วมสามแนวต่อไปนี้จะค่อยๆชัดเจนมากขึ้น