1. Fix trình duyệt Internet Explorer
Cách 1:
Viết css cho từng ie, đặt trong thẻ <head> kiểm tra phiên bản ie tương ứng:
• Tất cả phiên bản ie
<!--[if 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]-->
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 2:
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
Ví dụ:
* html #div {• Chỉ chạy trên ie7: thêm "*+html " trước khối css mà bạn định nghĩa
height: 500px;
}
Ví dụ:
*+html #div {• Chỉ chạy trên ie8
height: 500px;
}
Ví dụ:
#div {• Không cho chạy trên ie6 và các phiên bản ie về trước
height: 500px\0/;
}
Ví dụ:
html > body #div {
height: 500px;
}
Cách 3:
.className
{
padding:10px\0/; /* chỉ chạy trên IE9 + IE8 */
}
@media all and (min-width:0) {
.className { color:pink \0/; } /* chỉ chạy trên IE9 */
}
.className{padding:10px\9;} /* chỉ chạy trên IE8 */
.className{padding:10px\0;} /* chỉ chạy trên IE8 */
.className{*padding :10px ;} /* chỉ chạy trên IE7 */
hoặc
* + html .class{margin-left:20px;} /* chỉ chạy trên IE7 */
.className{_padding :10px ;} /* chỉ chạy trên IE6 */
hoặc
* html .logo{margin-left:10px;} /*chỉ chạy trên IE6 */
2. Fix trình duyệt Chrome
Cách 1: Sử dụng 1 file css riêng cho trình duyệt Chrome
<script type="text/javascript">
if(navigator.userAgent.toLowerCase().match('chrome'))
document.write('<link rel="stylesheet" type="text/css" href="files/chrome.css">');
</script>
Cách 2 : Fix ngay trên file css chính
<style>
@media screen and (-webkit-min-device-pixel-ratio:0)
{
div#search_form button
{
margin-left:-15px;
}
}
</style>
3. Fix trình duyệt Firefox
html>/**/body .className{margin-left:10px}
Hoặc
@-moz-document url-prefix() {
.className {font-size: .6em;}}
4. Fix trình duyệt Safari
@media screen and (-webkit-min-device-pixel-ratio:0)
{ .className { margin:10px; } }
5. Fix trình duyệt Opera
@media all and (min-width:0px) {head~body .className {margin-left:10px;}}Chúc các bạn thành công!
/* version 9 và các version trước đó /*
0 nhận xét:
Post a Comment