今天小编跟大家讲解下有关css hack之\9和\0就可能对hack IE11\IE9\IE8无效 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css hack之\9和\0就可能对hack IE11\IE9\IE8无效 的相关资料，希望小伙伴们看了有所帮助。
每次设计一张网页或一个表单 都被各种浏览器的兼容问题伤透脑筋 尤其是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>测试地址：http://demo.aidi.net.cn/html/ie-hack/ie-hack1.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>测试地址：http://demo.aidi.net.cn/html/ie-hack/ie-hack2.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以上浏览器可以读懂此代码：
@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; } @media all and (min-width:0) { .content{ background-color:#000; } } </style></head><body> <div class="content">IE11显示黄色 IE8 显示蓝色 IE9显示黑色。</div></body></html>测试地址：http://demo.aidi.net.cn/html/ie-hack/ie-hack3.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; } @media all and (min-width:0) { .content{ background-color:#000\0; } } </style></head><body> <div class="content">IE11显示黄色 IE8 显示蓝色 IE9显示黑色。</div></body></html>测试地址：http://demo.aidi.net.cn/html/ie-hack/ie-hack4.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>测试地址：http://demo.aidi.net.cn/html/ie-hack/ie-hack5.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>测试地址：http://demo.aidi.net.cn/html/ie-hack/ie-hack6.html
结果是 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; background-color:#FFFF00\9; } </style></head><body> <div class="content">IE11显示蓝色 IE8 IE9均显示黄色</div></body></html>测试地址：http://demo.aidi.net.cn/html/ie-hack/ie-hack7.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; background-color:#FFFF00\9; } @media all and (min-width:0) { .content{ background-color:#000\9; } } </style></head><body> <div class="content">IE11显示蓝色 IE8显示黄色 IE9显示黑色</div></body></html>测试地址：http://demo.aidi.net.cn/html/ie-hack/ie-hack8.html
特别注意 @media all and (min-width:0) {} 里面的样式要加上 \9 表明这是给IE9的 不然Chrome和Firefox、360等浏览器都可以读 并且本例meta声明了IE=Edge属性的IE11也能读了。
本文结论
对于如何hack IE8 IE9 IE11的问题 本文已经给出了完美的解决方案。必须认识两点 就是是否在meta声明了IE=Edge属性 这对hack的代码写法有巨大区别 \9和\0的用法也唯妙唯俏。
来源：爱蒂网
