Hack CSS trên trình duyệt IE10

Gia đình miền Tây huyện Thới Bình hơn 20 năm chăm sóc hàng nghìn chim trời

Tập tành Working With Domain Access Module in Drupal 7.x

Posted by: Khanh Hoang
Wed, 6/03/2013, 9:14 (GMT+7)
0 Bình luận

Hack CSS trên trình duyệt IE10

Internet Explorer10 chưa phải là hoàn hảo nhưng thật đáng buồn là Microsoft đã bỏ đi một tính năng vô cùng hữu ích để giúp fix lỗi CSS trên IE đó là bình luận điều kiện lọc trình duyệt IE, có quá nhiều cách để hack CSS trên các trình duyệt IE cũ nhưng 'bình luận điều kiện' là cách thức giễ dùng nhất để mã css của bạn được validation, chúng ta mong đợi có nhiều cải tiến ở phiên bản mới của trình duyệt IE và IE10 phần nào đã giảm đi rất nhiều phiền toái cho các nhà phát triển web, với sự hổ trợ CSS3 và HTML5 mạnh mẽ hơn trình duyệt IE10 đang lấy lại được thị phần của mình. Tuy nhiên không phải tất cả mọi thứ đều hoàn hảo, chắc chắn rằng sẽ có những thuộc tính CSS hiển thị không đồng nhất trên trình duyệt của các hãng khác nhau và trên từng phiên bản của trình duyệt đó, lúc này chúng ta không còn sử dụng bình luận điều kiện lọc trình duyệt trên IE10 được nữa, bạn có thể truy cập msdn.microsoft.com để xem mô tả về điều này, sau đây chúng ta sẽ cùng xem xét những giải pháp để hack css trên trình duyệt IE10.

@cc_on

Sử dụng một đoạn HTML bình luận điều kiện phủ định IE, với phiên bản IE6-9 sẽ bị loại bỏ bởi câu điều kiện này, tiếp theo ở bên trong đoạn đoạn điều kiện sẽ sử dụng một cú pháp được gọi là @cc_on. Xem ví dụ sau:

<!--[if !IE]><!--<script>
if (/*@cc_on!@*/false) {
    document.documentElement.className+=' ie10';
}
</script><!--<![endif]-->

Đoạn javaScript bên trong đã thêm một class có tên 'ie10' vào phần tử gốc <HTML>, như vậy với class trên bạn có thể sử dụng để định kiểu CSS cho các phần tử trong tài liệu HTML của bạn và được sử dụng cho trình duyệt Internet Explorer 10

@media -ms-high-contrast

Một cách khác được giới thiệu bởi Alex Kloss

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   /* IE10-specific styles go here */
}

Tuy nhiên nó không làm việc với IE10 trên Window7, theo Alex Kloss có thể nó cũng sẽ làm việc trên IE11

@media Zero

Phương pháp này có tác dụng lên cả 2 phiên bản IE9 và IE10, bạn có thể xem thêm chi tiết cách hack trên các phiên bản khác tại blog của Keith Clark

@media screen and (min-width:0\0) {
    /* IE9 and IE10 rule sets go here */
}

Đây có vẻ là cách đơn giản nhất, nhưng chúng ta cũng không biết chắc rằng nó có còn hoạt động trên IE11 hay không. Có thể còn có những cách khác để hack IE10 nhưng chúng ta cũng có thể tạm hài lòng với những cách vừa nêu.

Tham khảo impressivewebs.com

Tags:

backlink nội bộ

Bạn thấy bài viết này như thế nào?: