Là một người làm web chắc hẳn ai cũng đau đầu việc layout web chạy
tốt trên tình duyệt này nhưng sang trình duyệt khác thì bị vỡ rất xấu.
Vậy phải làm sao? Sau đây là cách đơn giản để fix mọi trình duyệt bằng
css, sau khi đọc bài hướng dẫn này chắc các bạn không phải lo về việc
này nữa :))
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:
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
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ụ:
Ví dụ:
Ví dụ:
Ví dụ:
Cách 3:
2. Fix trình duyệt Chrome
Cách 1: Sử dụng 1 file css riêng cho trình duyệt Chrome
Cách 2 : Fix ngay trên file css chính
3. Fix trình duyệt Firefox
Hoặc
4. Fix trình duyệt Safari
5. Fix trình duyệt Opera
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 đó /*
