Có hai cách để làm việc trên
- Viết một file css cho từng ie, trong thẻ <head> kiểm tra phiên bản ie tương ứng để chạy
- Hack css theo từng phiên bản ie
Cách một:
Viết một file css cho từng ie, trong thẻ <head> kiểm tra phiên bản ie tương ứng để chạy
- Tất cả phiên bản ie
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
- Chạy với các trình duyệt khác, trừ trình duyệt ie
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->
- Chỉ chạy trên ie6
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
- Chỉ chạy trên ie7
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
Chúng ta có thể kết hợp gt (greater than), gte (greater than or equal), lt (less than), lte (less than or equal)
VD: chỉ chạy trên các trình duyệt từ ie7 trở về sau
<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
Cách hai: Hack css theo từng phiên bản ie
- Chỉ chạy trên ie6: thêm "* html " trước khối css mà bạn định nghĩa
* html #div {
height: 500px;
}
- Chỉ chạy trên ie7: thêm "*+html " trước khối css mà bạn định nghĩa
*+html #div {
height: 500px;
}
- Chỉ chạy trên ie8
#div {
height: 500px\0/;
}
- Không cho chạy trên ie6 và các phiên bản ie về trước
html > body #div {
height: 500px;
}