css hack之\9和\0就可能对hack IE11\IE9\IE8无效

  发布时间:2020-03-20 19:42:49   作者:webkaka   我要评论
每次设计一张网页或一个表单,都被各种浏览器的兼容问题伤透脑筋,尤其是IE家族。在做兼容性设计时,我们往往会使用各种浏览器能识别的独特语法进行hack,从而达到各种浏览器下显示正常的目的

每次设计一张网页或一个表单,都被各种浏览器的兼容问题伤透脑筋,尤其是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.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-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.jb51.net/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以上浏览器可以读懂此代码:

/* 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>

测试地址: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-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>

测试地址:http://demo.jb51.net/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.jb51.net/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.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-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>

测试地址: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-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>

测试地址: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的用法也唯妙唯俏。

相关文章

  • css hack之\9和\0就可能对hack IE11\IE9\IE8无效

    每次设计一张网页或一个表单,都被各种浏览器的兼容问题伤透脑筋,尤其是IE家族。在做兼容性设计时,我们往往会使用各种浏览器能识别的独特语法进行hack,从而达到各种浏览
    2020-03-20
  • css区分ie8/ie9/ie10/ie11 chrome firefox的代码

    这篇文章主要介绍了css区分ie8/ie9/ie10/ie11 chrome firefox的代码,需要的朋友可以参考下
    2020-03-20
  • 解决CSS浏览器兼容性问题的4种方案

    这篇文章主要介绍了解决CSS浏览器兼容性问题的4种方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学
    2020-02-28
  • 常见的浏览器兼容性问题(小结)

    这篇文章主要介绍了常见的浏览器兼容性问题(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学
    2020-02-20
  • border-radius IE8兼容处理的方法

    这篇文章主要介绍了border-radius IE8兼容处理的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学
    2020-02-12
  • 浅谈遇到的几个浏览器兼容性问题

    这篇文章主要介绍了浅谈遇到的几个浏览器兼容性问题,详细的介绍了几种我遇到的问题和解决方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-09-26
  • base64图片在各种浏览器的兼容性处理

    这篇文章主要介绍了base64图片在各种浏览器的兼容性处理的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-14
  • 对常见的css属性进行浏览器兼容性总结(推荐)

    这篇文章主要介绍了对常见的css属性进行浏览器兼容性总结(推荐)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-20
  • 针对IE浏览器的兼容问题小结

    这篇文章主要介绍了针对IE浏览器的兼容问题小结,需要的朋友可以参考下
    2017-04-19
  • 避免不必要的浏览器兼容性问题的5个技巧

    浏览器兼容性问题总是让人很头疼,这里介绍几个技巧来避免这个问题,需要的朋友可以参考下
    2017-04-08

最新评论