โดย Radiz เมื่อ 2007-08-21 10:47:20 ดูทั้งหมด 643 ครั้ง
เพื่อน ๆ คงเคยกำหนดให้ box หนึ่ง box มีระยะห่างจาก box อีกตัวที่เป็นตัวครอบโดยใช้ float: left กันใช่ไหมครับ ฟังดูแล้วคงเหมือนง่ายใช่ไหมครับก็แค่กำหนด อะไร ๆ ตามปกติและเมื่อลอง preview กับ Modern Browser ทุกตัวก็ได้การแสดงผลออกมาที่เป็นปกติ แต่ลองเอาไปเปิดใน Internet Explorer 6 ดูสิครับ!! ทำไม ระยะห่างของ Margin ที่เรากำหนดนั้นมันเพิ่มขึ้นเป็นสองเท่า
ลองเขียน selector ขึ้นมาสักตัว เช่น:
.floatbox { float: left; width: 100px; margin: 5px 0 5px 60px; border: 1px solid black;}
จาก selector ข้างบนจะเห็นว่า ผมกำหนดให้ระยะห่างของ Margin ทางด้านซ้ายเป็น 60 pixels เมื่อลอง preview มันก็น่าจะให้ผลตามที่เรากำหนดนั้น
จากรูปเป็นการ preview ใน FireFox ซึ่งแสดงผลออกมาเป็นระยะปกติตามที่เราได้กำหนดให้กับ .floatbox คือ 60 pixels คราวนี้เราจะลองเอาไป preview ใน Internet Explorer 6 ว่ามันจะแสดงผลออกมา อย่างไร
จากรูปคุณจะเห็นว่า ระยะ Margin ที่เรากำหนดนั้นมันเพิ่มขึ้นมาเป็นสองเท่า เหตุการณ์นี้เกิดขึ้นได้อย่างไร อย่าตั้งคำถามแบบนั้นเลยครับก็มันเป็น Internet Explorer 6 นี่นะ Engine ที่มันไม่เคยเปลี่ยนนั่นน่ะ ที่ไม่สนโลกที่พัฒนาไปไหนต่อไหน ไม่เคยสนใจต่อมาตรฐานที่พึงจะปฏิบัติหรือกำหนด เป็นต้นเหตุแห่งความปวดหัว เหตุการณ์นี้ จะเกิดก็ต่อเมื่อ float ตัวนั้นเป็น float ตัวแรกของระนาบนั้น ๆ ไม่ว่าจะเป็นซ้าย หรือ ขวา คุณจะได้รับโชคสองเท่า เท่ากัน ปัญหานี้เป็นปัญหาหนักที่เหล่า Designer ไม่สามารถแก้ไขได้จน มกราคมปี 2004 Steve Clason ก็เป็นคนชี้ทางสว่างคนแรก วิธีแก้ปัญหานี้คือ เราต้องใส่ display: inline กำกับเข้าไปใน float ด้วย แล้วเราจะได้การแสดงผลเป็นไปตามที่เรากำหนดให้ไว้ใน Internet Explorer 6 ครับ
ลองเพิ่ม display: inline เข้าไปใน box ที่เราเขียนไว้ตอนแรกดูอย่างนี้
.floatbox { float: left; width: 100px; display: inline; margin: 5px 0 5px 60px; border: 1px solid black;}
Modern Browser จะมองเห็นเป็นปกติเหมือนเดิม แต่เจ้า Internet Explorer 6 นั้นจะแสดงผลถูกต้องตามที่เราต้องการด้วย หวังว่าคงมีประโยชน์ในการนำไปใช้ครับ
Tags:
Unknown Version Unknown
