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

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

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?: 
Average: 10 (1 vote)
Ảnh của Khanh Hoang

Khanh Hoang - Kenn

Kenn is a user experience designer and front end developer who enjoys creating beautiful and usable web and mobile experiences.

More about Khanh Hoang

Bài cùng chuyên mục

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 
7 Things to Look For in a Drupal Developer: Drupal Web Development

7 suy nghĩ của Drupal Developer

Maybe you’ve made the extremely intelligent decision to switch to the Drupal CMS; maybe you’ve been a Drupalite for awhile but are looking for some Drupal web development insight; or maybe you’re looking for a good CMS home for your site.

Setup Xdebug, Acquia Dev Desktop, and Netbeans in Windows 7

Cấu hình Xdebug, Acquia Dev Desktop, và Netbeans trên Windows 7

I usually use linux, but for various reasons I've needed to use windows lately and so I figured I would setup Xdebug, Acquia Dev Desktop, and Netbeans in Windows.

[Phần 2] Hướng dẫn creating a custom field : Field widget trong Drupal 8

[Phần 2] Hướng dẫn creating a custom field : Field widget trong Drupal 8

This is part 2 in my series of articles about creating a custom field. I recommend reading Part 1: Field type first, if you have not done so already.

Công ty diệt chuột T&C

 

Diet con trung

Donate

Paypal donate