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的。但有时你真正运用起来，它并不凑效。看狼蚁网站SEO优化的html代码
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>hack IE8/IE9/IE11_css实例_卡卡网 webkaka.</title>
<style type="text/css">
.content{
width:400px;height:50px;color:#c;
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.</title>
<style type="text/css">
.content{
width:400px;height:50px;color:#c;
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呢？这个就是问题的关键。
在此文 中提到，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.</title>
<style type="text/css">
.content{
width:400px;height:50px;color:#c;
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.</title>
<style type="text/css">
.content{
width:400px;height:50px;color:#c;
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.</title>
<style type="text/css">
.content{
width:400px;height:50px;color:#c;
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.</title>
<style type="text/css">
.content{
width:400px;height:50px;color:#c;
background-color:#FF0000; / 红色 /
background-color:#FFFF00\9; / 黄色 /
background-color:#0000FF\0; / 蓝色 /
}
</style>
</head>
<body>
<div class="content">IE8 IE9 IE11 均显示蓝色</div>
</body>
</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.</title>
<style type="text/css">
.content{
width:400px;height:50px;color:#c;
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.</title>
<style type="text/css">
.content{
width:400px;height:50px;color:#c;
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>
测试地址
特别注意，@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的用法也唯妙唯俏。
长沙网站设计
- 如何自己建一个网站 自己想建个网站,怎么建
- 如何制作网站免费建站 创建网站免费注册
- html简单网页代码 html简单网页代码超链接
- dreamweaver网页制作 dreamweaver网页制作模板
- 上海网站建设 上海网站建设制作微信
- 如何制作网站和网页 如何制作一个网页
- html网页制作代码大全 端午节html网页制作代码大
- app开发公司 app开发公司前十名
- html网页制作 html网页制作文字居中
- app制作一个需要多少钱 请人制作一个app多少钱
- 成都网站制作 成都网站制作维护
- 百度建一个网站多少钱 百度做个公司网站要多少
- html+css网页制作成品 web网页制作成品css+javascrip
- html网页制作案例 html网页设计案例
- html+css网页制作成品 web网页制作成品css+javascrip
- 个人网站模板 个人网站模板HTML