Fix css để hiển thị tốt trên các trình duyệt

Bây giờ chúng ta cùng fix css để hiển thị hoàn hảo theo từng trình duyệt nhá:

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:

[code language=”css”]
/*Chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
#demo{ color: red }
}
[/code]

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:

[code language=”css”]
/* 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;
}
}
[/code]

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)

[code language=”css”]
/* Safari*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
.demo{ display: block; }
}
[/code]

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

[code language=”css”]
/*=== 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;
}
[/code]

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.

[code language=”css”]
/*=== 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;
}
[/code]

Chúng ta còn có thể định dạng các selector trên các phiên bản IE bằng cách viết như sau:
#ie6 #demo{} ; #ie7 #demo{} ; …

[thongbao]

1. Hy vọng với một số cách trên có thể giúp các bạn hiển thị website theo ý muốn của mình.
2. Kiến thức là không giới hạn, mình chỉ viết blog và lưu lại những gì mình biết và hiểu theo cách của mình, nếu có sai sót gì, các bạn cứ phản hồi mình sẽ sửa lại. Cảm ơn.[/thongbao]