Trang chủ » Thiết kế web » Hướng dẫn fix lỗi tất cả các trình duyệt dễ dàng bằng css

Hướng dẫn fix lỗi tất cả các trình duyệt dễ dàng bằng css

2188 Lượt xem

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:

•    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 {
height: 500px;
}

•    Chỉ chạy trên ie7: thêm "*+html " trước khối css mà bạn định nghĩa


Ví dụ:

*+html #div {
height: 500px;
}

•    Chỉ chạy trên ie8


Ví dụ:

#div {
height: 500px\0/;
}

•    Không cho chạy trên ie6 và các phiên bản ie về trước


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;}}
/* version 9 và các version trước đó /*

Chúc các bạn thành công!