对着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