HTML5 浏览器兼容性解决方案
# 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>
2
3
4
5
6
更多的语义标签 请参考 (opens new window)。
# 一. 语义标签兼容性
# 1. 解决思路
主流浏览器都兼容 HTML 5 的新标签。对于 IE8 及以下版本，它不认识 HTML 5 的新元素，会把它们默认渲染为 display:inline 并且拒绝为它们添加任何样式。同时，渲染未知元素时，会把它们作为一个「没有后代的空元素」插入到 DOM 中。
解决方法很简单，使用 JavaScript 创建一个「没用的」元素即可，例如：
<script type="text/javascript">
document.createElement("article");
</script>
2
3
然后，我们把他们的样式设置为 display:block 就可以正常使用了。
# 2. 终极解决方案
按照上面的思路，能有效解决旧版 IE浏览器 的兼容性问题。但这样的方法显然很笨重，如果我们用到了很多 HTML5 的语义标签，那就要频繁去手动创建了。
因此，我们使用一种 终极解决方案：那就是借助 HTML5 Shiv (opens new window) 这个 js 插件。
它的原理很简单，也是和上面一样去创建这些元素。但是节省了我们开发者的工作量。直接在 <head></head> 当中引入就可以了，但是建议使用条件注释来引入，这样只在需要的时候才加载，避免性能消耗。
<!--[if lt IE 9]>
<script type="text/javascript" src="../html5shiv.min.js"></script>
<![endif]-->
2
3
# 二. 多媒体标签兼容性
# 1. 介绍
前面说过，HTML5 新增了 video 和 audio 两个多媒体标签，前者是视频，后者是音频。
但是不同浏览器对视频（音频）格式的支持很不一样，详情见 video 标签支持的格式 (opens new window)。
因此我们需要对多媒体标签做兼容处理。
# 2. 解决方案
以 video 标签为例：
原理是同一个文件做成三份，以此来兼容不同的浏览器。浏览器在解析的时候，只播放支持的那个多媒体文件，不再考虑其他的多媒体文件。
<video controls>
<source src="/media/helloworld.mp4">
<source src="/media/helloworld.ogg">
<source src="/media/helloworld.WebM">
</video>
2
3
4
5
audio 标签同上，只是换了个标签名。