html5浏览器兼容ie,HTML-Learning | HTML5浏览器兼容性解决方案

HTML5浏览器兼容性解决方案

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

前言

HTML5属于上一代HTML的新迭代语言，设计HTML5最主要的目的是为了在移动设备上支持多媒体。例如：video 标签和 audio 及 canvas 标记。

而HTML5在取消了过时的显示效果标记 和

等同时，也引入了一些新的语义标签，例如：

更多的语义标签请参考

一、语义标签兼容性

1. 解决思路

主流浏览器都兼容 HTML 5 的新标签。对于 IE8 及以下版本，它不认识 HTML 5 的新元素，会把它们默认渲染为display:inline并且拒绝为它们添加任何样式。同时，渲染未知元素时，会把它们作为一个「没有后代的空元素」插入到 DOM 中。

解决方法很简单，使用 JavaScript 创建一个「没用的」元素即可，例如：

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

2. 终极解决方案

按照上面的思路，能有效解决旧版IE浏览器的兼容性问题。但这样的方法显然很笨重，如果我们用到了很多HTML5的语义标签，那就要频繁去手动创建了。

因此，我们使用一种终极解决方案：那就是借助HTML5 Shiv这个js插件。

它的原理很简单，也是和上面一样去创建这些元素。但是节省了我们开发者的工作量。直接在

当中引入就可以了，但是建议使用条件注释来引入，这样只在需要的时候才加载，避免性能消耗。

使用方法如下：

二、多媒体标签兼容性

1. 介绍

前面说过，HTML5新增了 video 和 audio 两个多媒体标签，前者是视频，后者是音频。

但是不同浏览器对视频(音频)格式的支持很不一样，详情见video标签支持的格式

因此我们需要对多媒体标签做兼容处理。

2. 解决方案

以 video 标签为例：

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

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