Kiến thức lập trình — August 3, 2016 at 4:29 am

Cách Fix lỗi css để hiển thị tốt trên các trình duyệt

by

Sau đây chúng tôi xin chia sẻ các bạn cách fix lại lỗi css để tương thích và hiển thị chuẩn trên các trình duyệt chỉ một vài thao tác đơn giản.

1. Chrome

Đây là một trình duyệt rất thông dụng hiện nay, và hỗ trợ rất tốt css, đương nhiên không phải là tất cả nên chúng ta có cách khắc phục:

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

2. Fifrefox

Đây cũng là một trình duyệt thông dụng, nhưng vẫn tỏ ra yếu hơn chrome, các lỗi hiển thị của css cũng nhiều hơn:

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

3. Safari
Safari là trình duyệt được dùng mặc định trên các thiết bị của apple, nó cũng là một trình duyệt tương đối khó chịu(mình cũng ít sử dụng trình duyệt này)

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

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

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

5.Internet Explorer – IE
Nói đến trình duyệt này thì thật sự mệt và nhức đầu, nó hiển thị chẳng đúng như ý mình tý nào lại còn quá nhiều phiên bản, hy vọng trình duyệt mới của Microsoft sẽ khác.

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

Thật đơn giản đúng không các bạn. Với thao tác trên các bạn không còn lo ngại việc người dùng sử dụng các trình duyệt khác nhau nữa. Hy vọng đây là những thông tin bổ ích dành cho bạn.

Theo: nongdanit

Leave a Comment

Your email address will not be published. Required fields are marked *