Trong quá trình thiết kế web, điều làm đau đầu nhất đó là làm sao để trang web mà mình thiết kế có thể chạy tốt trên các trình duyệt. Nhất là khi khách hàng sử dụng những trình duyệt đã cũ như IE6 chẳng hạn. Tuy nhiên , với bài viết này, các bạn sẽ dễ dàng chỉnh sửa giao diện chạy tốt trên các trình duyệt như Firefox, Chrome, Safary và kể cả những trình duyệt lâu đời như IE6 trở về trước.

Cách hack css cho tất cả các trình duyệt Mình xin giới thiệu các cách để hack css sau đây :

Cách 1 : Hack ngay trong file css

Đối với Firefox

1
2
html>body .logo{margin-left:10px}
html>body .logo{margin-left:10px}

Đối với IE

1
2
3
4
5
6
7
8
9
10
11
12
.box {
margin-top:5px;
margin-top:8px\9;
*margin-top:8px;
_margin-top:8px;
_mar\gin-top: 8px;
_margin-top: 10px;
margin-top:9px;
_margin-top: 22px;
}
* html .logo{margin-left:10px;}
* + html .logo{margin-left:20px;}

Google Chrome và Safari

1
2
3
4
5
#test1{color:green;}
@media screen and (-webkit-min-device-pixel-ratio:0) {
#test1{color:red;}
}

Google Chrome và Opera<10

1
2
3
4
5
6
7
#test2{
color:green;
-bracket-:hack(;
color:red;
);
}

Nếu bạn chỉ muốn hack cho riêng trình duyệt Chrome thì dùng :

1
2
3
4
5
6
7
#test3{
color:green;
(-bracket-:hack;
color:red;
);
}

Hoặc :

1
2
3
4
5
6
7
#test4{
color:green;
-bracket-:hack[;
color:red;
];
}

SAFARI

1
2
3
4
5
.box {
margin-top:5px;
padding:5px;# // đây là phần hack css cho safari
}

OPERA

1
2
3
4
5
.myclass { background-color: red; }
@media screen and (-webkit-min-device-pixel-ratio:0) {
.myclass { background-color: yellow; }
}
@media all and (min-width:0px) {head~body .logo {margin-left:10px;}}

Cách 2 : Để css hack ngay trong thẻ <head> với các câu lệnh điều khiển if….else

1
2
3
4
5
6
7
<link rel="stylesheet" type="text/css" media="screen" href="/css/style.css" />
<!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="/css/ie7.css"  />
< ![endif]-->
<!--[if IE 6]><link rel="stylesheet" type="text/css" media="screen" href="/css/ie6.css"  />< ![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" href="/ie8.css">
<![endif]-->

Ở cách trên , muốn hack css ở trình duyệt nào thì các bạn viết css tương ứng cho file css tương ứng. Ngoài ra các bạn cũng có thể làm theo cách sau :

1
2
3
4
<!--[if lte IE 7]> <html> <![endif]-->
<!--[if IE 8]>     <html> <![endif]-->
<!--[if IE 9]>     <html> <![endif]-->
<!--[if !IE]><!--> <html>             <!--<![endif]-->

Và trong file css của bạn, bạn sẽ phải chỉ định theo từng trình duyệt như sau :

1
2
3
4
5
6
7
8
9
10
11
12
.element {
margin-bottom: 20px;
}
.ie7 .element {
margin-bottom: 10px;
}
.ie8 .element {
margin-bottom: 15px;
}

Trên đây là các cách để hack CSS trên các trình duyệt phổ biến hiện nay là Google Chrome, Firefox, IE, Opera và Safari. Nếu bạn nào có cách hack tốt hơn cho các trình duyệt hoặc biết cách hack cho những trình duyệt khác thì xin chia sẻ với mình và mọi người biết nhá. Mình rất mong sự đóng góp ý kiến của các bạn.

Chúc các bạn thành công !