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{} ; …