IE兼容模式(x-ua-compatible)

2019-03-03  本文已影响0人  原来哥哥是万家灯火

1.微软为什么要设计这个属性?
因为高版本的ie,废除了一些老旧的、不符合w3规范的api或特性,并不直接向下兼容。以前针对低版本开发的程序,可能在高版本上就会出现问题,为了照顾大家的情绪,就设计了这个属性,让开发者可以叫新ie以以前的方式执行程序。

比如:

obj = document.getElementById("testdiv");
obj.addEventListener('click', function(){ alert('1') })

你可能很熟悉这个代码,但是ie8并不支持addEventListener,所以当时的开发人员就用了它支持的方式:

obj.attachEvent('onclick', function(){ alert('1') })

一直到ie10都还支持这个方法,ie11则不支持了。实际情况中,从头去改可能很麻烦。但用户用ie11打开这个网站可能就会出故障,为了避免这个问题,就可以告诉ie11以ie10的方式渲染。

2.指定方式有三种:

3.特点:

4.检测 ie实际渲染方式:document.documentMode,edge无效。

5.demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=10,chrome=1">
  <title>Title</title>
  <style type="text/css">
    .wrap {
      position: relative;
      width: 100px;
      height: 100px;
      margin: auto;
      background-color: green;
    }

    .item {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 50px;
      height: 50px;
      background-color: blueviolet;
    }
  </style>
</head>
<body>
<div class="wrap" id="testdiv">
  <div class="item"></div>
</div>
<script type="text/javascript">
  obj = document.getElementById("testdiv");
  obj.attachEvent('onclick', function(){ alert('1') })
  // obj.addEventListener('click', function(){ alert('1') })
  // 切换至ie8,可见ie8连 transform 也不支持
</script>
</body>
</html>

浅析网页meta标签中X-UA-Compatible属性的使用
IE 兼容性标记 X-UA-Compatible 解释和用法

6.待续:
ie=EmulateIE8和ie=8的区别?
http-equiv还有哪些用?
http-equiv和response-header同时作用下,到底听谁的?

上一篇 下一篇

猜你喜欢

热点阅读