Khắc phục lỗi double margin (bị nhân đôi khoảng cách) của một thẻ sử dụng float trên IE6

Giới thiệu
Khi tạo giao diện bằng thẻ DIV, đa phần chúng ta đều sử dụng float để canh chỉnh các cột, hoặc những box. Lỗi double margin là lỗi tạo nên một khoảng trống có kích thước bằng gấp đôi kích thước ta chỉ định, lấy ví dụ:

<style>
    body {margin: 0px; padding: 0px;}
    .wrapper1 {border: 5px solid red; float: left; width: 200px; margin: 20px;}
    .wrapper2 {border: 5px solid blue; float: right; width: 200px; margin: 20px;}
</style>
<div class="wrapper1">Nội dung bên trong</div>
<div class="wrapper2">Nội dung bên trong</div>

Trong trang html trên, ta có 2 class wrapper1 và wrapper2, đều sử dụng thuộc tính float là left và right, có margin là 20px. Khi hiển thị trên firefox:

 

Như bạn thấy, ở firefox hoặc những trình duyệt trừ IE6, kích thước vùng trống margin đúng bằng 20px. Nhưng khi ta duyệt bằng IE6:

Thì bỗng dưng IE6 "hào phóng" "khuyến mãi" cho ta thêm 20px nữa, đúng là "mua 1 tặng 1", lỗi này gây khó chịu cho người thiết kế giao diện html rất nhiều, vì mọi thành phần trong trang sẽ bị xáo trộn khi kích thước bị tăng lên đột ngột, ở đây chỉ là 20px thành 40px, nhưng nếu ta margin khoảng 100px thì sẽ được là 200px, một con số khủng khiếp đủ để làm biến dạng bộ mặt website.

Cách khắc phục
Để khắc phục lỗi này, sau khi tham khảo từ nhiều nguồn "xém tin cậy", mình có rút ra được một vài kinh nghiệm:

Cách 1: Giảm trừ theo "gia cảnh"
Sử dụng cách hack CSS chỉ chạy trên IE6 để điều chỉnh lại margin cho đúng như mong đợi, nhìn đoạn mã sau:

.wrapper1
{
    float: left;
    margin: 20px;
    width: 200px;
}
* html .wrapper1
{
    margin: 10px;
}

Ở phần định nghĩa sau * html .wrapper1, đây là định nghĩa chỉ chạy trên IE6 hay chỉ IE6 mới hiểu, ta sẽ định lại margin là 10px, vậy dù có bị nhân đôi lên thì  vẫn là 20px, nhược điểm của cách này là hơi dài dòng và có trường hợp không thể xử lý được như: ta cần sử dụng margin: 3px, thì không thể áp dụng cách này và chia 2 thành margin: 1.5px được.

Cách 2: Sử dụng display: inline
Với cách này mọi việc đơn giản hơn nhiều, ta chỉ việc thêm thuộc tính display: inline cho những class có float, điều này về mặt lý thuyết không làm ảnh hưởng đến "hòa bình thế giới" chi cả, nó vẫn đảm bảo cho ta sử dụng đoạn mã tương thích trên mọi trình duyệt mà không cần phải hack hay điều chỉnh lại.

.wrapper1
{
    float: left;
    margin: 20px;
    width: 200px;
    display: inline;
}

Chú ý
Lỗi này thường phát sinh trên những tag có sử dụng thuộc tính float, và những tag này có dạng khối (display: block) mặc định như: div, p, table, h1, h2... nên nếu sử dụng a, span, b, ... là những tag có display: inline mặc định thì chúng ta không cần lo lắng.