Đặt style riêng cho Internet Explorer

Đăng bởi Neo trong mục Hướng dẫn vào 09 tháng 11, 2009 | Comments

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:

gt: lớn hơn
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

Bạn có thích bài viết này?

Neo's picture

Neo

Nhìn mặt trời từ năm 1984 nhưng tới tận 2002 mới được thấy cái máy tính đầu tiên của mình. Đầu năm 2007 thì quyết định theo cái nghề cao quý là thiết kế web Big Grin. Hiện mình đang sống tại Hà Nội. Sở thích: làm website và giúp đỡ mọi người phát triển website theo chiều hướng tốt đẹp hơn.

Trang chủ - Twitter