Lỗi thường gặp với IE 6

• October 7, 2009
• 45 comments

IE 6 là trình duyệt “bệnh” nhất trong các trình duyệt. Những ai đã từng làm web cũng luôn phải đau đầu vì trình duyệt này. Bởi vì nó được thiết kế không theo chuẩn web. Khi giao diện của bạn được hiển thị rất tốt ở các trình duyệt hiện đại như FireFox, Chrome, Safari … nhưng nếu thử trên IE 6 có khi bạn không nhận ra trang web của mình nữa. Trong video này chúng ta sẽ tìm hiểu những lỗi phổ biến nhất của IE 6 và cách khắc phục chúng

Trong bài này chúng ta sẽ xem xét những lỗi sau của IE 6 và cách khắc phục từng lỗi

• Double Margin xảy ra khi mình đặt một thành phần float: left và đặt margin-left cho nó
• Lỗi “bậc thang” xảy ra với list khi bạn cho nó float: left
• Hack IE 6 để nó có hiệu ứng hover với tất cả các thành phần
• Lỗi Transparent với PNG, xảy ra khi bạn sử dụng định dạng PNG. IE 6 sẽ hiển thị một màu mờ mờ thay vì trong suốt
• Cách sử dụng conditional stylesheet

Thời lượng:33:24

Link Download định dạng .avi chất lượng cao: MegaUpload, MediaFire

File Size: 81.9MB

File download trong video: iepngfix.htc và csshover3.htc

Mới cập nhật (8/4/10)

Hack lỗi căn giữa trang web

Bạn cũng biết là chúng ta có thể sử dụng CSS để căn giữa trang web với thuộc tính margin: 0 auto, nhưng IE 6 không hiểu được thuộc tính này và hậu quả là nó bị lệch sang trái. Cách sửa như sau:

body {text-align: center;}
#wrapper {text-align: left; width: 1000px; margin: 0 auto;}

Ban đầu chúng ta dùng thuộc tính căn lề giữa cho toàn bộ trang cho thẻ body, IE 6 nó hiểu phần này và cho cả trang web ra giữa. Nhưng mọi thứ đều bị căn giữa hết kể cả chữ, cho nên chúng ta phải áp dụng lại thuộc tính text-align: left cho #wrapper

Lỗi min-height trong IE 6

Thuộc tính min-height trong CSS rất hữu dụng khi bạn cần đặt một độ cao tối thiểu cho một thẻ div chẳng hạn. Ví dụ bạn không muốn thẻ div nào đó có độ cao nhỏ nhất là 200px. Với trình duyệt thường thì không có vấn đề, nhưng với IE 6 nó không hiểu được thuộc tính này gây ra rất nhiều phiên toái. Cách sửa bạn có thể làm như sau:

selector {
  min-height:200px;
  height:auto !important;
  height:200px;
}

Chẳng may chó ngáp phải ruồi hay sao mà IE 6 lại có thể hiểu được thuộc tính height: 200px như các trình duyệt hiện đại đọc thuộc tính min-height.