Thật tình mà nói, mình rất ngán ngẩm khi phải sửa lỗi hiển thị web trên các trình duyệt IE, đặc biệt là trên các phiên bản IE cũ như IE6,IE7. Nhưng nói gì thì nói, khách hàng làm web vẫn còn rất nhiều người sử dụng IE như là trình duyệt mặc định của họ, vì thế chúng ta cần phải thiết kế sao cho phù hợp với những phiên bản IE này. Hôm nay mình xin chia sẻ với các bạn 3 lựa chọn cho việc chỉ định CSS chỉ chạy trên các phiên bản IE khác nhau.
Lựa chọn 1 : Sử dụng Conditional Comments
<!–[if IE 8]> = IE8
<!–[if lt IE 8]> = IE7 trở xuống
<!–[if gte IE 8]> = Phiên bản lớn hơn hoặc bằng IE8
Đây là cách thông dụng nhất mà mọi người thường hay sử dụng cho các phiển bản IE cũ (IE6, IE7, IE8). Dưới đây là cách dùng minh họa :
<!--[if IE 8]>
<style type="text/css">
/* css cho IE 8 */
</style>
<![endif]-->
<!--[if lt IE 8]>
<link href="ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
Lựa chọn 2 : Sử dụng CSS Hacks
– Đối với IE8 trở xuống các bạn chèn \9 ngay trước dấu chấm phẩy ( ; ).
– Đối với IE7 trở xuống thì chèn dấu * trước thuộc tính CSS.
– Còn với IE6 thì chèn dấu gạch dưới ( _ ) trước thuộc tính.
Các bạn có thể tham khảo như sau :
.box {
background: gray; /* chuẩn */
background: pink\9; /* IE 8 trở xuống */
*background: green; /* IE 7 trở xuống */
_background: blue; /* IE 6 */
}
Lựa chọn 3 : Sử dụng Conditional HTML Class
Lựa chọn cuối cùng là sử dụng CSS class cho từng phiên bản IE chỉ định như sau:
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->
Đây là cách rõ ràng và đơn giản nhất để bạn chỉ định riêng cho từng phiên bản IE.
Nếu các bạn có thêm bất kì lựa chọn nào khác thì nên chia sẻ cho mình và mọi người khác đều biết nhé.