每次设计一张网页或一个表单，都被各种浏览器的兼容问题伤透脑筋，尤其是ie家族。在做兼容性设计时，我们往往会使用各种浏览器能识别的独特语法进行hack，从而达到各种浏览器下显示正常的目的。其中，我们用得最多莫属于\9和\0了。\9和\0是hack ie8、ie9、ie11的独特标识。但是问题来了，\9和\0到底怎样hack ie8、ie9、ie11这三个浏览器？这个问题一直困扰我很久，不过，今天我终于搞明白了，也独创了一个能hack ie8、ie9、ie11这三个浏览器的代码写法模式，本文将与各位分享。
\9和\0为什么可能hack ie11\ie9\ie8无效？
可能很多人都略明白，\0是用来hack ie8、ie9、ie11的，而\9是用来hack ie9的。但有时你真正运用起来，它并不凑效。看下面的html代码：
<!doctype html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>hack ie8/ie9/ie11_css实例_卡卡网 webkaka.com</title>
<style type="text/css">
.content{
width:400px;height:50px;color:#ccc;
background-color:#ff0000; /* 红色 */
background-color:#0000ff\0; /* 蓝色 */
background-color:#ffff00\9; /* 黄色 */
}
</style>
</head>
<body>
<div class="content">ie8 ie9 ie11均显示黄色</div>
</body>
</html>
上例中，\9和\0就达不到hack 各ie浏览器版本的目的。不过我们把 /* 蓝色 */ 和 /* 黄色 */ 这两行调换，又会怎样显示呢？请看html代码：
<!doctype html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>hack ie8/ie9/ie11_css实例_卡卡网 webkaka.com</title>
<style type="text/css">
.content{
width:400px;height:50px;color:#ccc;
background-color:#ff0000; /* 红色 */
background-color:#ffff00\9; /* 黄色 */
background-color:#0000ff\0; /* 蓝色 */
}
</style>
</head>
<body>
<div class="content">ie11显示黄色，ie8 ie9 均显示蓝色</div>
</body>
</html>
结果是，ie11显示黄色，而ie8和ie9均显示蓝色。
上述两个例子说明，ie8、ie9都能读懂\9和\0标识，此两标识哪个写在后面就以哪个为准，而ie11仅能读懂\9标识。
至此，我们能否根据上述结论来写代码来hack ie8、ie9和ie11三个浏览器？显然是不可以的，至少你不可以hackie8和ie9，仅能hackie11。
如何hack ie8和ie9
那么，我们如何去hack ie8和ie9呢？这个就是问题的关键。
在此文 css区分ie8/ie9/ie10/ie11 chrome firefox的代码 中提到，ie9以上浏览器可以读懂此代码：
/* ie9+ */
@media all and (min-width:0) {
.divcontent{
background-color:#eee;
}
}
我们用此代码结合前面的代码，是不是就可以hack ie8和ie11了？完整html代码如下：
<!doctype html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>hack ie8/ie9/ie11_css实例_卡卡网 webkaka.com</title>
<style type="text/css">
.content{
width:400px;height:50px;color:#ccc;
background-color:#ff0000; /* 红色 */
background-color:#ffff00\9; /* 黄色 */
background-color:#0000ff\0; /* 蓝色 */
}
/* ie9+ */
@media all and (min-width:0) {
.content{
background-color:#000; /* 黑色 */
}
}
</style>
</head>
<body>
<div class="content">ie11显示黄色，ie8 显示蓝色，ie9显示黑色。</div>
</body>
</html>
至此，ie8、ie9、ie11的兼容性问题就解决了。
不过，还没玩，因为 @media all and (min-width:0) 在 chrome、firefox、360等浏览器同样有效。所以，上面代码需要稍微修改下，在 @media all and (min-width:0) {} 里面的css语句同样加上\0标识，表示这是属于ie9的样式。修改后的完整代码如下：
<!doctype html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>hack ie8/ie9/ie11_css实例_卡卡网 webkaka.com</title>
<style type="text/css">
.content{
width:400px;height:50px;color:#ccc;
background-color:#ff0000; /* 红色 */
background-color:#ffff00\9; /* 黄色 */
background-color:#0000ff\0; /* 蓝色 */
}
/* ie9+ */
@media all and (min-width:0) {
.content{
background-color:#000\0; /* 黑色 */
}
}
</style>
</head>
<body>
<div class="content">ie11显示黄色，ie8 显示蓝色，ie9显示黑色。</div>
</body>
</html>
至此，ie8、ie9、ie11的兼容性问题就完美解决了。
meta声明属性 ie=edeg 后，ie8\ie9\ie11的兼容代码
但是，如果网页html代码里声明了meta元件 ie=edge，那么上面的代码是不对的。
先看第一个html代码：
<!doctype html>
<head>
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>hack ie8/ie9/ie11_css实例_卡卡网 webkaka.com</title>
<style type="text/css">
.content{
width:400px;height:50px;color:#ccc;
background-color:#ff0000; /* 红色 */
background-color:#0000ff\0; /* 蓝色 */
background-color:#ffff00\9; /* 黄色 */
}
</style>
</head>
<body>
<div class="content">ie11显示蓝色，ie8 ie9均显示黄色</div>
</body>
</html>
结果是，ie11显示蓝色，ie8 ie9均显示黄色，并非三个浏览器都显示黄色了。
这就说明，加了meta ie=edge 这句，ie11不再能读\9这个标识。
我们再看如下代码：
<!doctype html>
<head>
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>hack ie8/ie9/ie11_css实例_卡卡网 webkaka.com</title>
<style type="text/css">
.content{
width:400px;height:50px;color:#ccc;
background-color:#ff0000; /* 红色 */
background-color:#ffff00\9; /* 黄色 */
background-color:#0000ff\0; /* 蓝色 */
}
</style>
</head>
<body>
<div class="content">ie8 ie9 ie11 均显示蓝色</div>
</body>
</html>
execcodegetcode
结果是，ie8 ie9 ie11 均显示蓝色，这说明了，ie8 ie9 ie11 均能读懂\0这个标识。
结合上面两个例子，可以得出结论，加了meta ie=edge 属性后，ie8 ie9能同时读懂\9和\0这两个标识，而ie11仅能读懂\0这个标识。
所以，我们可以据此来hack出ie11。如下html代码加以说明：
<!doctype html>
<head>
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>hack ie8/ie9/ie11_css实例_卡卡网 webkaka.com</title>
<style type="text/css">
.content{
width:400px;height:50px;color:#ccc;
background-color:#ff0000; /* 红色 */
background-color:#0000ff\0; /* 蓝色 这个是给ie11的 */
background-color:#ffff00\9; /* 黄色 这个是给ie8和ie9的 */
}
</style>
</head>
<body>
<div class="content">ie11显示蓝色，ie8 ie9均显示黄色</div>
</body>
</html>
这样，我们再用上面的代码hack出ie8和ie9就可以了。
如何hack ie8和ie9 ？还是前面那个hack ie8 ie9的关键代码：
@media all and (min-width:0) {}
完整html代码这样写：
<!doctype html>
<head>
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>hack ie8/ie9/ie11_css实例_卡卡网 webkaka.com</title>
<style type="text/css">
.content{
width:400px;height:50px;color:#ccc;
background-color:#ff0000; /* 红色 */
background-color:#0000ff\0; /* 蓝色 这个是给ie11的 */
background-color:#ffff00\9; /* 黄色 这个是给ie8和ie9的 */
}
/* ie9+ */
@media all and (min-width:0) {
.content{
background-color:#000\9; /* 黑色 这个是给ie9的 */
}
}
</style>
</head>
<body>
<div class="content">ie11显示蓝色，ie8显示黄色，ie9显示黑色</div>
</body>
</html>
以上就是\9和\0可能hack ie11\ie9\ie8无效原因详解的详细内容。