HTML5新标签的兼容性处理

普通浏览器

普通不支持HTML5新标签的浏览器 —— 能正常解析,但会当初成 inline 元素对待

在不支持HTML5新标签的浏览器里,会将这些新的标签解析成行内元素(inline)对待,所以我们只需要将其转换成块元素(block)即可使用;经常会到初始化 css中看到:

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}

IE9以下的浏览器

IE9 以下浏览器 —— 不能解析,即使想办解析了也会当成 inline 元素对待

但是在IE9版本以下(不含IE9),并不能正常解析这些新标签,我们需要先想办法让浏览器能够正常解析后,再将其转化成块级元素 (block)。常见有两种方法

处理方式(一)

可以识别通过document.createElement('tagName')创建的自定义标签,于是我们的解决方案就是将HTML5的新标签全部通过document.createElement('tagName')来创建一遍,这样IE低版本也能正常解析HTML5新标签了。再通过css将其转化成 block 元素

处理方式(二)

在实际开发中我们更多采用的是通过检测IE浏览器的版本来加载三方的一个JS库html5shiv.js来解决兼容问题

<script src="../js/html5shiv.min.js"></script>

主要是针对于ie低版本的,也就是只有低版本ie才执行才对,可以使用条件注释:

<!--[if lt IE 9]>

   <script src="js/respond.js"></script>

   <script src="js/html5shiv.min.js"></script>

<![endif]-->

这里的respond.js是解决 ie低版本的CSS3媒体查询兼容性问题

还有一些常见的条件注释,也可以了解一下

<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lte IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以下版本可识别 <![endif]-->
<!--[if gt IE 7]> IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->
上一篇:JS 验证一组input框是否为空的方法


下一篇:设置TabBarItem选中时的图片及文字颜色