Cách cho hoặc không cho một đoạn CSS hoạt động trên IE

Trong thiết kế web thì không phải đoạn CSS nào cũng hiển thị tốt trên IE (internet explorer) và không phải tất cả phiên bản IE đều hỗ trợ hiển thị CSS giống nhau. Do vậy quy định giới hạn phạm vi hoạt động cụ thể của từng CSS với từng phiển bản IE là rát cần thiết.

1. Trường hợp 1: 

Nếu bạn muốn ngăn chặn tất cả các phiên bản IE không nhìn thấy một đoạn CSS thì bạn sử dụng code như bên dưới. Trường hợp này xảy ra khi một đoạn thuộc tính CSS nào đó (ví dụ đoạn CSS A) không có tác dụng tốt, tức là nó làm cho một ID hay CLASS liên quan không hiển thị tốt trên các trình duyệt IE mà hiển thị tốt trên trình duyệt khác như Firefox, Chrome…

<!--[if !IE]>
-->
<style type="text/css">
Đoạn CSS A đặt ở đây
</style>
<!--
<![endif]-->

- Theo chức năng đoạn code trên thì, các công cụ trình duyệt không phải IE (như Firefox) sẽ bỏ qua nội dung giữa dấu <!-- trên dòng 1 và dấu --> trên dòng 2. Chính dấu --> trên dòng 2 đóng phần chú thích ngay trước đoạn CSS đối với các trình duyệt không phải IE và cho phép các trình duyệt đó nhìn thấy đoạn CSS này. Việc mở lại phần chú thích ngay sau đoạn CSS sẽ ẩn đi phần còn lại của phần chú thích điều kiện đối với các trình duyệt không phải IE.

IE sẽ xử lý tất cả nội dung giữa <!--[if !IE]> trên dòng 1 và <![endif]--> trên dòng 7. Việc đặt dấu chấm than ! trước IE trong phần mở khai báo điều kiện sẽ cho các phiên bản trình duyệt IE biết để bỏ qua nội dung giữa <!--[if !IE]> trên dòng 1 và <![endif]--> trên dòng 7. Nếu lượt bỏ dấu chấm than ! trước IE sẽ cho tất cả các phiên bản IE xử lý nội dung bên trong phần khai báo điều kiện. Khi đó sẽ xảy ra trường hợp 2.

2. Trường hợp 2: 

- Nếu bạn muốn đoạn CSS chỉ hoạt động đối với tất cả các phiên bản IE thì sử dụng cú pháp như sau:

<!--[if IE]>
<style type="text/css">
Đoạn CSS A đặt ở đây
</style>
<![endif]-->

Trường hợp này hay dùng khi bạn muốn Favicon trên blogspot hiển thị trên IE, bạn sẽ dùng code như thế này.

<!--[if IE]>
<link href='/favicon.ico' rel='shortcut icon' type='image/x-icon'/>
<![endif]-->
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>

3. Trường hợp 3: 

Nếu bạn muốn đoạn CSS không hoạt động trên một phiên bản IE (ví dụ IE6) mà vẫn hoạt động trên tất cả các trình duyệt không phải IE thì sử dụng cú pháp như bên dưới.

<!--[if !IE 6]>
<style type="text/css">
Đoạn CSS A đặt ở đây
</style>
<![endif]-->

<!--[if !IE]>
-->
<style type="text/css">
Đoạn CSS A đặt ở đây
</style>
<!--
<![endif]-->

Hoặc muốn gọn hơn thì dùng thế này:

<!--[if !IE 6]>
-->
<style type="text/css">
Đoạn CSS A đặt ở đây
</style>
<!--
<![endif]-->

Hy vọng bạn sẽ tìm thấy ít nhiều sự hữu ích từ thủ thuật này

Tham khảo: thuthuatbloger.

Chủ đề: