对着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之外其他浏览器都支持的。这是拉阵营的节奏？
所有代码亲测有效，有错的地方欢迎指出。^_^
时间： 2024-10-30 06:26:20