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.


Cách khắc phục
Ta cần thêm thuộc tính overflow: hidden vào những thẻ có height nhỏ hơn chiều cao font như sau:

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