HTML5浏览器兼容性

HTML5新增语义标签,以及如何兼容老版本浏览器。

前言

  HTML5属于上一代HTML的新迭代语言,设计HTML5最主要的目的是为了在移动设备上支持多媒体。例如:video 标签和 audio 及 canvas 标记。
  而HTML5在取消了过时的显示效果标记 <font></font><center></center> 等同时,也引入了一些新的语义标签,例如:

<header></header>
<footer></footer>
<article></article>
<aside></aside>
<nav></nav>
<section></section>

  更多的语义标签请参考

一、语义标签兼容性

1. 解决思路

  主流浏览器都兼容 HTML 5 的新标签。对于 IE8 及以下版本,它不认识 HTML 5 的新元素,会把它们默认渲染为display:inline并且拒绝为它们添加任何样式。同时,渲染未知元素时,会把它们作为一个「没有后代的空元素」插入到 DOM 中。
  解决方法很简单,使用 JavaScript 创建一个「没用的」元素即可,例如:

<script type="text/javascript">
    document.createElement("article");
</script>

  然后,我们把他们的样式设置为display:block就可以正常使用了。

2. 终极解决方案

  按照上面的思路,能有效解决旧版IE浏览器的兼容性问题。但这样的方法显然很笨重,如果我们用到了很多HTML5的语义标签,那就要频繁去手动创建了。
  因此,我们使用一种终极解决方案:那就是借助HTML5 Shiv这个js插件。
  它的原理很简单,也是和上面一样去创建这些元素。但是节省了我们开发者的工作量。直接在 <head></head> 当中引入就可以了,但是建议使用条件注释来引入,这样只在需要的时候才加载,避免性能消耗。
  使用方法如下:

<!--[if lt IE 9]>
    <script type="text/javascript" src="../html5shiv.min.js"></script>
<![endif]-->

二、多媒体标签兼容性

1. 介绍

  前面说过,HTML5新增了 video 和 audio 两个多媒体标签,前者是视频,后者是音频。
  但是不同浏览器对视频(音频)格式的支持很不一样,详情见video标签支持的格式
  因此我们需要对多媒体标签做兼容处理。

2. 解决方案

  以 video 标签为例:
  原理是同一个文件做成三份,以此来兼容不同的浏览器。浏览器在解析的时候,只播放支持的那个多媒体文件,不再考虑其他的多媒体文件。

<video controls>
    <source src="/media/helloworld.mp4">
    <source src="/media/helloworld.ogg">
    <source src="/media/helloworld.WebM">
</video>

  audio 标签同上,只是换了个标签名。


  转载请注明: 文渊博客 HTML5浏览器兼容性

  目录