Forum

Đặ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 - 5 bình luận

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

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

Bình luận

Khách's picture

mucsher (not verified)

March 21, 2010

Hi ! thank nhé, đúng cái mình đang cần rùi Big Grin

Khách's picture

mucsher (not verified)

March 21, 2010

à cho mình hỏi nếu muốn viết style riêng cho các trình duyệt web khác thì cũng dùng cách này hả bạn vd: chrome, safari ...

Neo's picture

Neo

March 22, 2010

Thường chỉ viết style cho IE vì IE có nhiều cái không chuẩn. Nhưng để viết cho các trình duyệt như chrome, safari cậu có thể dùng kiểu:
/*\*/
html>body*.tenclass {padding:10px;font-size:12px;}
/**/
Đặt mã vào trong /*\*/ và /**/
Theo mình biết thì Chrome dùng Apple WebKit engine nên hack cho chrome và safari là như nhau

Khách's picture

matngoc (not verified)

March 26, 2010

Cũng có thể viết style riêng cho Chrome/Safari như sau:

@media screen and (-webkit-min-device-pixel-ratio:0){/* For Safari & Chrome*/
.class {property: value;}
}

Khách's picture

vietking89_mm (not verified)

March 21, 2010

hehe, cái này bổ quá, thx nhìu nhé, h bạn mới bjt' Wink)

Post new comment

The content of this field is kept private and will not be shown publicly. If you have a Gravatar account, used to display your avatar.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.
  • Textual smileys will be replaced with graphical ones.

More information about formatting options

CAPTCHA
Do tình trạng xì pam nên phiền bạn điền đoạn Captcha dưới (không phân biệt chữ hoa hay chữ thường & không có dấu cách)
3
K
S
g
s
8
Enter the code without spaces and pay attention to upper/lower case.