Khắc phục lỗi chiều cao thẻ nhỏ hơn chiều cao của font mặc định của IE6

Khi tạo box ta thường sử dụng 4 thẻ DIV với cấu trúc như sau

<div class="box">
    <div class="box-top"></div>
    <div class="box-middle">Nội dung</div>
    <div class="box-bottom"></div>
</div>

Ta sử dụng một hình ảnh làm nền:

Các phần box-top, box-middle, box-bottom chứa những phần hình ảnh tương ứng: cạnh trên của hộp, phần giữa hộp, cạnh dưới hộp. Do phần cạnh trên và cạnh dưới có chiều cao nhỏ 10px, ta đặt style như sau:

.box-top {height: 10px; background: ...}
.box-bottom {height: 10px; background: ...}

Hiển thị ở những trình duyệt khác thì hoàn toàn chính xác:

Riêng IE6 bắt đầu "khó chịu":

Lần này ta được "ban tặng" cho 2 khoảng trống rất chi là vô duyên. Vậy khoảng trống này từ đâu ra ? Xin thưa rằng, trong IE6 nếu một thẻ có chiều cao X, và chiều cao của font là Y thì IE6 sẽ chọn chiều cao lớn nhất giữa 2 giá trị này làm chiều cao hiển thị của thẻ, điều này làm phát sinh những khoảng trống ngoài dự liệu.

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.