Việc lập trình tạo ra 1 trang web hiện nay đã không còn khó khăn nhiều cho các lập trình viên, tuy nhiên trước khi tạo ra được 1 trang web thì bạn phải định dạng được mã HTML và CSS mà người ta gọi là theme. Có thể nói đây là giai đoạn đã gây ra không ít khó khăn để tạo ra theme phù hợp với tất cả các trình duyệt, vì mỗi trình duyệt sẽ hiển thị theo một cách khác nhau. Vậy làm sao để khắc phục lỗi CSS để trang web của bạn hiển thị đúng và chạy chính xác trên tất cả trình duyệt? Bài viết hôm nay WNET.VN sẽ giúp bạn giải quyết được vấn đề này.

Bây giờ mình cùng bắt đầu tìm hiểu cách khắc phục của từng trình duyệt nhé.
1. FireFox - FF

Đây có thể nói là trình duyệt khá phổ biến với chúng ta, nhưng đôi khi cũng cần một vài điểm nhỏ để khắc phục lỗi css đối với trình duyệt này khi hiển thị website của mình.

Code:

/*=== Firefox 2 ===*/
html>/**/body .selector, x:-moz-any-link {
    color:red;
}
 
/*=== Firefox 3 ===*/
html>/**/body .selector, x:-moz-any-link, x:default {
    color:red;
}
 
/*=== Tất cả Firefox ===*/
@-moz-document url-prefix() {
    .selector {
        color:red;
    }
}

2. Internet Explorer - IE
IE có thể nói là 1 trình duyệt cứng đầu nhất trong tất cả trình duyệt, vì thế phần này mình sẽ giới thiệu một số cách để khắc phục lỗi css khi hiển thị website trên trình duyệt này.

Code:

/*=== IE 5.5 ===*/
#selector {
  margin/: 0 10px 0 5px;      /* IE5.5 */
}
 
/*=== IE 6 ===*/
body #ie6{
  _display: block;
} 
* html #selector {
  margin: 0 10px 0 5px;        /* IE6 */
}
#selector {
  _margin: 0 10px 0 5px;      /* IE6 */
}
   
/*=== IE 7 ===*/
html > body #ie7{
  *display: block;
}
#selector {
  *margin: 0 10px 0 5px;      /* IE7 */
}
 
/*=== IE6, IE7 ===*/
#selector {
    *color: blue;          /* hoặc #color: blue */
}
 
/*=== Tất cả nhưng trừ IE6 ===*/
#selector {
    color/**/: blue;
}
 
/*=== IE6, IE7, IE8 ===*/
#selector {
    color: blue\\9;
}

Ngoài ra bạn có thể đơn giản bằng cách viết: #ie6 #selector{} ; #ie7 #selector{} ; ... Bạn có thể định dạng selector mà bạn muốn trên các IE đó.

3. Safari

Safari, một trình duyệt mà tôi chưa dùng lần nào, nghe nói nó được dùng khá phổ biến cho các dòng máy MAC.

Code:

/*=== Safari ===*/
@media screen and (-webkit-min-device-pixel-ratio:0)  {
    #safari { display: block; }
}

4. Opera
Một trình duyệt khá hay về tốc độ cũng như cách hiển thị các feed bài viết một cách hoàn hảo.

Code:

/*=== Opera ===*/
@media all and (-webkit-min-device-pixel-ratio:10000),
not all and (-webkit-min-device-pixel-ratio:0) {
    head~body #opera { display: block; }
}
 
/*=== Opera 9 và cũ hơn ===*/
html:first-child #selector {
    margin: 0 10px 0 5px;     
}

5. Chrome
Chrome là trình duyệt mà tôi dùng mặc định khi lướt web của mình, chrome thật sự là một trình duyệt có tốc độ nhanh, nhanh hơn cả firefox, điều này đã được tôi chứng minh. Nhưng cũng như các trình duyệt khác, để cho website của mình chạy thống nhất được trên các trình duyệt khác nhau thì nó cũng cần khắc phục một vài lỗi css khi hiển thị.

Code:

/*=== Chrome 1+ ===*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #diez  { color: red  }
}

Theo như mình biết thì đa số thì các trình duyệt hiển thị gần giống nhau, nếu có thì cũng chỉ xê dịch một ít. Còn riêng thằng IE thì khỏi nói, nó là trình duyệt cứng đầu và tệ nhất, nên bạn cần bỏ nhiều thời gian để check hết các phiên bản của nó nhé. Nhưng theo mình thì ở thời điểm hiện tại bạn chỉ cần test từ IE 7 trở lên thôi, vì IE 6 và IE 5.5 chắc cũng không ai còn dùng nữa.( Ý kiến riêng của mình thôi nhé.)
Kết luận

Bạn có thích bài viết này không? Nếu có hãy giúp mình like bài viết này nhé hoặc bạn có thể chia sẽ bài này đến những người mà bạn nghĩ họ quan tâm, WNET.VN xin cảm ơn!

Mọi ý kiến thắc mắc hay đóng góp xin gởi về cho chúng tôi bằng form bình luận bên dưới, xin chúc các bạn thành công!