Hack的技术是针对不同浏览器写不同的样式，让浏览器达到不同的渲染效果。实现每个浏览器不同的渲染效果，可以用条件样式，也可以用Hack。下面就是我收集的一些Hack的各种方法。
1、Firefox
[css]
@-moz-document url-prefix() {
.p1 {
width:30px;
}
}
支持Firefox的还有几种写法：
[css]
/* 支持所有firefox版本 */
#p1[id=p1] { width:30px; }
或
[css]
@-moz-document url-prefix() { .p { width:30px; } }
或
[css]
/* 支持所有Gecko内核的浏览器 (包括Firefox) */
*>.p1 { width:30px; }
2、Webkit枘核浏览器(chrome and safari)
[css]
@media screen and (-webkit-min-device-pixel-ratio:0) {
p { width:30px; }
}
上面写法主要是针对Webkit内核的浏览器，如Google Chrome 和 Safari浏览器：
[css]
@media screen and (-webkit-min-device-pixel-ratio:0) {
p { width:30px; }
}
3、Opera浏览器
Opera浏览器没有Hack，网上的那些Opera的Hack我试过了，并不起作用。好不容易对Opera起作用了，一般浏览器都起作用了。若大家有Opera的Hack欢迎分享哟。
4、IE9浏览器
[css]
:root p {height:300px\9;}
5、IE9以及IE9以下版本
[css]
p {height:300px\9;}
6、IE8浏览器
[css]
p {height:300px/;}
或
[css
@media \0screen{
p {height:300px;}
}
7、IE8以及IE8以上的版本
[css]
p {height:300px\0;}
8、IE7浏览器
[css]
*+html p{height:300px;background:red;}
或
[css]
*:first-child+html p{height:300px;}
9、IE7及IE7以下版本浏览器
[css]
p {*height:300px;}
10、IE6浏览器
[css]
p {_height/**/:/**/300px;}
或
[css]
p {_height: 300px;}
或
[css]
*html p {height: 300px;}
上面的内容是我收集的一些各个版本浏览器下如何识别各种的Hack写法，包括了现代浏览器还有就是很奇葩的浏览器。接下来是CSS选择器和CSS属性选择器在不同浏览器的支持情况
1、IE6
[css]
* html p {background:red;}
2、仅仅IE7浏览器
[css]
*:first-child+html p {background:red;}
3、除IE6之外的所有浏览器(IE7-9, Firefox,Safari,Opera)
[css]
html>body p {background:red;}
4、IE8-9,Firefox,Safari,Opear
[css]
html>/**/body p {background:red;}
5、IE9+
[css]
:root p {background:red;}
6、Firefox浏览器
[css]
@-moz-document url-prefix() {
p {background:red;}
}
6、Webkit内核浏览器(Safari和Google Chrome)
[css]
@media screen and (-webkit-min-device-pixel-ratio:0) {
p {background:red;}
}
7、Opera浏览器
Opera浏览器没有Hack，网上的那些Opera的Hack我试过了，并不起作用。好不容易对Opera起作用了，一般浏览器都起作用了。若大家有Opera的Hack欢迎分享哟。
8、iPhone / mobile webkit
[css]
@media screen and (max-device-width: 480px) {
p {background:red;}
}
上面为大家介绍的是有关各个浏览器关于CSS的Hack的写法，基中有针对于现代浏览器Safari,Google Chrome和Firefox的写法还有前端们最讨厌的IE家族的Hack写法。下面是一些综合小技巧：
一、方法一：
[css]
p {
height:300px;
background: red;/*所有现代浏览器*/
background: green\9;/*所有IE浏览器*/
background: lime\0;/*IE8-9浏览器 Opera*/
*background: red;/*IE6-7浏览器*/
+background: blue;/*IE7浏览器*/
_background: orange;/*IE6浏览器*/
}
@media all and (min-width:0px){
background: #000;/*Webkit和Opera浏览器*/
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
background: #f36;/*Webkit内核浏览器*/
}
@-moz-document url-prefix(){
p{background:#ccc;}/* all firefox */
}
二、方法二：
1、创建条件样式表，并在HTML中body里添加相应的class类名
HTML代码：
[html]
<!--[if IE6]><body class="ie6"><<![endif]-->
<!--[if IE7]><body class="ie7"><![endif]-->
<!--[if IE8]><body class="ie8"><![endif]-->
<!--[if IE9]><body class="ie9"><![endif]-->
<!--[if !IE]><body class="non-ie"><![endif]-->
CSS代码：
[css]
p {height:30px;background: blue;}/*现代浏览器*/
.non-ie p {background: red;}/*除IE外浏览器*/
.ie9 p {background: yellow;}/*IE9浏览器*/
.ie8 p{background: green;}/*IE8浏览器*/
.ie7 p {background: orange;}/*IE7浏览器*/
.ie6 p {background: lime;}/*IE6浏览器*/
@media all and (min-width: 0px){
p {background:black;} /* webkit and opera */
}
@media screen and (-webkit-min-device-pixel-ratio:0){
p{background:#369;}/* webkit */
}
@-moz-document url-prefix(){
p{background:#963;}/* firefox * /
}
以上就是我所收集并整理的有关CSS的Hack的一些小技巧，希望能对大家有所帮助，能为大家解燃眉之急。不在万不得已的时候，大家还是不要用Hack哟。
