全国服务热线:4008-888-888

技术知识

css hack之\9和\0便可能对hack IE11\IE9\IE8失效

每次设计方案1张网页页面或1个表单,都被各种各样访问器的适配难题伤透脑子,特别是IE大家族。在做适配性设计方案时,大家常常会应用各种各样访问器能鉴别的与众不同英语的语法开展hack,从而做到各种各样访问器下显示信息一切正常的目地。在其中,大家用得数最多莫属于\9和\0了。\9和\0是hack IE8、IE9、IE11的与众不同标志。可是难题来了,\9和\0究竟如何hack IE8、IE9、IE11这3个访问器?这个难题1直困扰我很久,但是,今日我终究搞搞清楚了,也独创性了1个能hack IE8、IE9、IE11这3个访问器的编码写法方式,本文将与各位共享。

\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⑻"/>
    <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.jb51.net/html/ie-hack/ie-hack1.html

上例中,\9和\0就达不到hack 各IE访问器版本号的目地。但是大家把 /* 蓝色 */ 和 /* 黄色 */ 这两行替换,又会如何显示信息呢?请看html编码:

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf⑻"/>
    <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.jb51.net/html/ie-hack/ie-hack2.html

結果是,IE11显示信息黄色,而IE8和IE9均显示信息蓝色。

上述两个事例表明,IE8、IE9都能读懂\9和\0标志,此两标志哪一个写在后边就以哪一个为准,而IE11仅能读懂\9标志。

至此,大家能否依据上述结果来写编码来hack IE8、IE9和IE113个访问器?明显是不能以的,最少你不能以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⑻"/>
    <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>

检测详细地址:http://demo.jb51.net/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⑻"/>
    <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>

检测详细地址:http://demo.jb51.net/html/ie-hack/ie-hack4.html

至此,IE8、IE9、IE11的适配性难题就完善处理了。

meta申明特性 IE=Edeg 后,IE8\IE9\IE11的适配编码
可是,假如网页页面HTML编码里申明了Meta元件 IE=Edge,那末上面的编码是不对的。

先看第1个html编码:

<!DOCTYPE html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf⑻"/>
    <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.jb51.net/html/ie-hack/ie-hack5.html

結果是,IE11显示信息蓝色,IE8 IE9均显示信息黄色,并不是3个访问器都显示信息黄色了。

这就表明,加了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⑻"/>
    <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.jb51.net/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⑻"/>
    <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>

检测详细地址:http://demo.jb51.net/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⑻"/>
    <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>

检测详细地址:http://demo.jb51.net/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的用法也唯妙唯俏。



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服