GBIT.Hack Css cho các trình duyệt IE, Firefox, Chrome, Safari, Opera

Nhiều trình duyệt cho người dung có nhiều lựa chọn, nhưng lại làm khó dân lập trình. Đôi khi layout bên trình duyệt này ok, mà trình duyệt khác lại lỗi. Lúc này chúng ta phải hack Css thôi, hi..

1.IE

IE9 trở về trước: "\0/":

ví dụ:

.className

{

padding:10px\0/;

}

 

Cho trình duyệt IE version 8 trở về trước “\9”:

Ví dụ:

.className{padding:10px\9;}

 



Chỉ cho IE8 "\0":

.className{padding:10px\0;}

 



IE7 và các version trước nó “*” :

.className{*padding :10px ;}

 

hoặc

* + html .class{margin-left:20px;} /* IE7 */

 



IE6 và các version trước nó “_”:

.className{_padding :10px ;}

 

hoặc

* html .logo{margin-left:10px;} /* IE6 */

 



2.Firefox

html>/**/body .className{margin-left:10px}

 

Hoặc

@-moz-document url-prefix() {
.className {{font-size: .6em;}}

html>/**/body .className, x:-moz-any-link, x:default {background:red;} /* Firefox 3 */

 



3.Chrome

body:nth-of-type(1) .className{margin:20px;}

 

Hoặc:

@media screen and (-webkit-min-device-pixel-ratio:0) {
.className{ margin:0 26px 0 0; }
} /* hacked cho chrome và safari */

 



4.Safari

@media screen and (-webkit-min-device-pixel-ratio:0)
{ .className { margin:10px; } }

 



5.Opera

@media all and (min-width:0px) {head~body .className {margin-left:10px;}}

/* version 9 và các version trước đó /*
một cách hack khác cho IE 9

 


một cách hack khác cho IE 9 :

@media all and (min-width:0) {
#element { color:pink \0/; } /* IE9 */
}