Double-Float Margin Bug ใน IE6

เพื่อน ๆ คงเคยกำหนดให้ box หนึ่ง box มีระยะห่างจาก box อีกตัวที่เป็นตัวครอบโดยใช้ float: left กันใช่ไหมครับ ฟังดูแล้วคงเหมือนง่ายใช่ไหมครับก็แค่กำหนด อะไร ๆ ตามปกติและเมื่อลอง preview กับ Modern Browser ทุกตัวก็ได้การแสดงผลออกมาที่เป็นปกติ แต่ลองเอาไปเปิดใน Internet Explorer 6 ดูสิครับ!! ทำไม ระยะห่างของ Margin ที่เรากำหนดนั้นมันเพิ่มขึ้นเป็นสองเท่า

ลองเขียน selector ขึ้นมาสักตัว เช่น:

จาก selector ข้างบนจะเห็นว่า ผมกำหนดให้ระยะห่างของ Margin ทางด้านซ้ายเป็น 60 pixels เมื่อลอง preview มันก็น่าจะให้ผลตามที่เรากำหนดนั้น

IE With Float

จากรูปเป็นการ preview ใน FireFox ซึ่งแสดงผลออกมาเป็นระยะปกติตามที่เราได้กำหนดให้กับ .floatbox คือ 60 pixels คราวนี้เราจะลองเอาไป preview ใน Internet Explorer 6 ว่ามันจะแสดงผลออกมา อย่างไร

IE With Float

จากรูปคุณจะเห็นว่า ระยะ Margin ที่เรากำหนดนั้นมันเพิ่มขึ้นมาเป็นสองเท่า เหตุการณ์นี้เกิดขึ้นได้อย่างไร อย่าตั้งคำถามแบบนั้นเลยครับก็มันเป็น Internet Explorer 6 นี่นะ Engine ที่มันไม่เคยเปลี่ยนนั่นน่ะ ที่ไม่สนโลกที่พัฒนาไปไหนต่อไหน ไม่เคยสนใจต่อมาตรฐานที่พึงจะปฏิบัติหรือกำหนด เป็นต้นเหตุแห่งความปวดหัว เหตุการณ์นี้ จะเกิดก็ต่อเมื่อ float ตัวนั้นเป็น float ตัวแรกของระนาบนั้น ๆ ไม่ว่าจะเป็นซ้าย หรือ ขวา คุณจะได้รับโชคสองเท่า เท่ากัน ปัญหานี้เป็นปัญหาหนักที่เหล่า Designer ไม่สามารถแก้ไขได้จน มกราคมปี 2004 Steve Clason ก็เป็นคนชี้ทางสว่างคนแรก วิธีแก้ปัญหานี้คือ เราต้องใส่ display: inline กำกับเข้าไปใน float ด้วย แล้วเราจะได้การแสดงผลเป็นไปตามที่เรากำหนดให้ไว้ใน Internet Explorer 6 ครับ

ลองเพิ่ม display: inline เข้าไปใน box ที่เราเขียนไว้ตอนแรกดูอย่างนี้

Modern Browser จะมองเห็นเป็นปกติเหมือนเดิม แต่เจ้า Internet Explorer 6 นั้นจะแสดงผลถูกต้องตามที่เราต้องการด้วย หวังว่าคงมีประโยชน์ในการนำไปใช้ครับ

รักกันชอบกันอย่าลืมแชร์นะครัช:
0

Back to Top

9 Responses to Double-Float Margin Bug ใน IE6

  1. รีโกกุ

    ปวดหมองดีแท้

    Reply

  2. vick

    very nice.

    Reply

  3. jojo

    ใส่ yahoo Reset ก่อน ก็ได้ คือ Set ค่าทั้งหมดให้เป็น Default ก่อนกำหนดค่า เช่น

    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {

    margin:0;

    padding:0;

    }

    table {

    border-collapse:collapse;

    border-spacing:0;

    }

    fieldset,img {

    border:0;

    }

    address,caption,cite,code,dfn,em,strong,th,var {

    font-style:normal;

    font-weight:normal;

    }

    ol,ul {

    list-style:none;

    }

    caption,th {

    text-align:left;

    }

    h1,h2,h3,h4,h5,h6 {

    font-size:100%;

    font-weight:normal;

    }

    q:before,q:after {

    content:”;

    }

    abbr,acronym { border:0;

    }

    จากนั้นก็ทำตามปกติ

    Reply

  4. ultraman

    ให้ตายสิจอร์ช

    Reply

  5. มามิ

    ปัญหาของเบราเซอร์ที่ไม่เป็นมาตรฐาน แต่เป็นเบราเซอร์มาตรฐานของผู้ใช้

    …………….

    Reply

  6. iiTheme

    แล่มครับ แก้ได้โดยไม่รู้ตัว ก็เลยยิ่งงง พอได้อ่านบทความถึงได้ถึงบางอ้อเสียทรี

    Reply

  7. Jarsa

    อันนี้ละครับที่หาวิธีแก้อยู่ FireFox แสดงปกติ พอเป็น ie มันจะเพี้ยน นั่งงม อยู่ตั้งนาน ขอบคุณมากครับ

    Reply

  8. rubberman

    +1 ครับสำหรับเทคนิคดีๆ แบบนี้

    Reply

  9. Boatbie Keane

    ขอบคุณ Steve Clason ที่คิดค้น
    และคุณ Radiz บอกกล่าว

    Reply

Leave a Reply to rubberman Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to Top

Social media & sharing icons powered by UltimatelySocial