兼容性处理

1 设置 meta

<!--设置IE总是使用最新的文档模式进行渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">

<!--优先使用 webkit ( Chromium ) 内核进行渲染, 针对360等壳浏览器-->
<meta name="renderer" content="webkit">

2 IE8 及以下浏览器识别H5新增标签

2.1 实现原理

1. JavaScript，document.create() 创建每一个H5新增的标签
2. 在CSS中为刚创建的新标签设置CSS，display属性

<style>
    header,footer,nav,article,aside,section,main {
        display: block;
    }
</style>
<script>
    (function () {
        document.createElement('header');
        document.createElement('footer');
        document.createElement('nav');
        document.createElement('main');
        document.createElement('aside');
        document.createElement('article');
        document.createElement('section');
    })();
</script>

2.2 使用第三方库

<!--[if lt ie 9]>
    <script src="/dist/js/html5shiv.min.js"></script>
<![endif]-->

3 IE 条件注释(了解)

3.1 关于条件注释

• IE 中的条件注释对 IE 的版本和非 IE 版本有优秀的区分能力。
• 条件注释的基本结构和HTML的注释 <!-- --> 是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。
• IE 将会根据 if 条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。
• 只有IE9 以及 IE9 以下浏览器可以识别

3.2 基本运算符

lt 小于

lte 小于等于

gt 大于

gte 大于等于

! 逻辑非

3.3 示例

<!--[if IE 8]> 仅IE8可见 <![endif]--> 
<!--[if gt IE 8]>仅IE 8以上可见<![endif]—>
<!--[if lt IE 8]>仅IE 8以下可见<![endif]—>
<!--[if gte IE 8]>IE 8及以上可见<![endif]—>
<!--[if lte IE 8]>IE 8及以下可见<![endif]—>
<!--[if !IE 8]>非IE 8的IE可见<![endif]-->
<!--[if !IE]><!--> 您使用不是 Internet Explorer <!--<![endif]-->