首页前端开发HTML\9和\0可能hack IE11\IE9\IE8无效原因详解

\9和\0可能hack IE11\IE9\IE8无效原因详解

时间2024-01-22 18:22:11发布访客分类HTML浏览712
导读：收集整理的这篇文章主要介绍了\9和\0可能hack IE11\IE9\IE8无效原因详解，觉得挺不错的，现在分享给大家，也给大家做个参考。每次设计一张网页或一个表单，都被各种浏览器的兼容问题伤透脑筋，尤其是IE家族。在做兼容性设计时，我们往...
收集整理的这篇文章主要介绍了\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>

上例中，\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无效原因详解的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

上一篇: 生日蛋糕的制作方法-不过用的是H...下一篇:li inside-block在IE11换行无效的...猜你在找的html5相关文章 关于移动端h5开发相关内容总结2022-05-17html5教程-学表单的第二天2018-12-10html5教程-HTML5浏览器支持2018-12-10html5教程-HTML5智能表单2018-12-10html5教程-微信H5使用resLoader实现加载页效果2018-12-10html5教程-day01-初级-JS0-热身运动JS入门教程2018-12-10html5教程-html5shiv.js和respond.min.js2018-12-10html5教程-不同浏览器对于html5 audio标签和音频格式的兼容性2018-12-10html5教程-使用Html5实现手风琴案例2018-12-10html5教程-html5笔记2018-12-10 其他相关热搜词更多phpjavapython程序员load

若转载请注明出处： \9和\0可能hack IE11\IE9\IE8无效原因详解
本文地址： https://pptw.com/jishu/583220.html
li inside-block在IE11换行无效的原因 为什么现在HTML5的优势越来越大

游客 回复需填写必要信息
↑