浏览器的CSS各种hack，大汇总

对着IE久了也有感觉了，在win10出新浏览器以及中国的IE6+用户没有普及新的浏览器前IE还是个坑，所以hack这东西还是要掌握一点的。不废话直接贴图

记得之前在项目里面针对IE6的hack是这样写的_bakcground:#fff;其实这只是能给IE6用罢了。

黄色部分为选择器hack

IE Hack

IE系列浏览器的hack大略如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Examples</title>

<meta name="description" content="">

<meta name="keywords" content="">

<link href="" rel="stylesheet">

<style type="text/css">

body{

    /*普通的背景——大家都懂的 */

     /*background:#ccc;*/

    /*IE5到IE10的背景*/

    /* background:#f00\9;*/

    /*IE8+*/

    /*background:#f00\0;*/

    /*只有IE8*/

    /*background:#f00\0/;*/

    /*IE5,IE6,IE7*/

    /**background:#0f0; */

    /*IE5,IE6,IE7*/

    /*+background:#0f0; */

    /*IE5,IE6,IE7*/

    /*@background:#0f0; */

    /*IE5,IE6,IE7*/

    /*>background:#0f0; */

    /*IE5,IE6,IE7*/

    /*/background: orange;*/

    /*IE5,IE6,IE7*/

    /*#background:#9d55b8; */

    /*IE5,IE6*/

    /*_background:#00f;*/

}

    /*IE9,IE10*/

:root body{background:#f00\9; };

</style>

</head>

<body class="demo">

    <p>manfred Hu</p>

</body>

</html>

其中IE6因为IE没有自带所以下了个浏览器专门测试，其他为IE开启旧的模式测试的，可以像我一样一行一行注释掉测试。

FireFox Hack

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Examples</title>

<meta name="description" content="">

<meta name="keywords" content="">

<link href="" rel="stylesheet">

<style type="text/css">

@-moz-document url-prefix(){

    body{

        background:#ccc;

    }

}

</style>

</head>

<body>

    <p>manfred Hu</p>

</body>

</html>

Chrome and Safari and Opera Hack

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Examples</title>

<meta name="description" content="">

<meta name="keywords" content="">

<link href="" rel="stylesheet">

<style type="text/css">

@media screen and (-webkit-min-device-pixel-ratio:0){

    body{

        background:#ccc;

    }

}

</style>

</head>

<body>

    <p>manfred Hu</p>

</body>

</html>

这个hack是除了FireFox和IE之外其他浏览器都支持的。这是拉阵营的节奏？

所有代码亲测有效，有错的地方欢迎指出。^_^

最著名、最有用的CSS过滤器之一是星号HTML Hark。IE的老版本（6-）有一个匿名的根元素，它包围着HTML元素。可以利用这点使用继承构建IE独有规则：

* html #content{ width:500px; }

子选择器Hark：使用旧版本IE不认识的子选择器Hark

html > body { background-image:url(bg.png); }

“_”是IE6专有的hack

“+”是IE7的

“\9” IE6/IE7/IE8/IE9/IE10都生效

“\0” IE8/IE9/IE10都生效，是IE8/9/10的hack

“\9\0” 只对IE9/IE10生效，是IE9/10的hack