Đặt style riêng cho Internet Explorer
Bài viết được dịch lại từ quirksmode.org
Tác giả: ppk
Nếu bạn đang (hoặc mới học) viết CSS & HTML cho các trang web thì chắc hẳn bạn đã biết sự hiển thị khác nhau của website & lỗi trên các trình duyệt Internet Explorer (IE). Để giải quyết vấn đề này, chúng ta cần phải hack riêng style cho IE. Rất may là từ IE5 trở về sau, Microsoft hỗ trợ "Conditional comments" giúp bạn phân biệt được phiên bản IE với các trình duyệt khác. Thậm chí bạn còn có thể phân biệt các bản IE khác nhau như IE 5.5, IE6, IE7...
Cách sử dụng
<!--[if IE 6]> Các style và script dành riêng cho IE 6 <![endif]-->
- Cấu trúc của "Conditional comments" tương tự như comment của HTML. Do đó các trình duyệt khác sẽ bỏ qua các đoạn mã trong đó.
- Window Explorer đã được lập trình để nhận ra cú pháp đặc biệt <!--[ if IE]> và đọc nội dung đó như một đoạn mã bình thường
- "Conditional comments" chỉ có thể sử dụng trong file HTML và không sử dụng được ở file CSS hay JavaScript.
Ví dụ
Bạn có thể copy đoạn code dưới đây vào trong thẻ body của 1 file HTML và xem nó trên trình duyệt. Bạn sẽ thấy phiên bản IE mà bạn đang sử dụng. Nếu không có thông báo nào hiện ra nghĩa là bạn đang xem ở 1 trình duyệt khác IE
<div> <!--[if IE]> Bạn đang sử dụng Internet Explorer<br /> <![endif]--> <!--[if IE 5]> Bạn đang sử dụng Internet Explorer phiên bản 5<br /> <![endif]--> <!--[if IE 5.0]> Bạn đang sử dụng Internet Explorer phiên bản 5.0<br /> <![endif]--> <!--[if IE 5.5]> Bạn đang sử dụng Internet Explorer phiên bản 5.5<br /> <![endif]--> <!--[if IE 6]> Bạn đang sử dụng Internet Explorer phiên bản 6<br /> <![endif]--> <!--[if IE 7]> Bạn đang sử dụng Internet Explorer phiên bản 7<br /> <![endif]--> <!--[if gte IE 5]> Bạn đang sử dụng Internet Explorer phiên bản 5 và về sau<br /> <![endif]--> <!--[if lt IE 6]> Bạn đang sử dụng Internet Explorer phiên bản thấp hơn 6<br /> <![endif]--> <!--[if lte IE 5.5]> Bạn đang sử dụng Internet Explorer phiên bản thấp hơn hoặc bằng 5.5<br /> <![endif]--> <!--[if gt IE 6]> Bạn đang sử dụng Internet Explorer phiên bản lớn hơn 6<br /> <![endif]--> </div>
Các điều kiện đặc biệt:
lte: nhỏ hơn hoặc bằng
Tôi khuyên bạn cố gắng tìm và hiểu sự khác biệt giữa IE và các trình duyệt khác. Khi đó bạn sẽ ít phải dùng tới "Conditional comments" hơn.
Thẻ Comment
Nếu bạn muốn style cho tất cả các trình duyệt không phải IE, bạn có thể dùng thẻ <comment>
<p>Đây <comment>không phải </comment>là trình duyệt Internet Explorer.</p>
Bạn có thể tham khảo thêm tại đây