html5在不同浏览器兼容,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 标签同上，只是换了个标签名。

html5在不同浏览器兼容,HTML5浏览器兼容性解决方案相关推荐

IE6,IE7和8浏览器兼容HTML5标签的解决方案
html5大行其道的时代已经到来.如果你还在等待浏览器兼容,说明你已经与web脱节几条街了.当然,这得益于移动客户端的蓬勃发展.如果还在纠结于,是否应该掌握html5和css3技术时,请狠狠的抽自己 ...
IE9 以下版本浏览器兼容html5
(1) IE9 以下版本浏览器兼容HTML5的方法,使用静态资源的html5shiv包: <!--[if lt IE9]> <script src="http://c ...
让IE浏览器兼容HTML5
在HTML 5高歌猛进的今天,各大主流浏览器,如Chrome.Firefox.Opera.Safari等,纷纷在不同程度上支持HTML 5,紧跟时代的步伐:而当Microsoft反应过来的时候,IE已 ...
为什么需要考虑浏览器兼容，浏览器渲染引擎在浏览器中的作用是什么样的？
为什么需要做浏览器兼容?–渲染引擎在浏览器中的作用 Web浏览器的体系结构 User Interface:用户界面.可以使最终用户能够与界面上所有可视元素进行交互. Browser Engine:浏览 ...
IE9 以下版本浏览器兼容HTML5的方法，使用的静态资源的html5shiv包：
<!--[if lt IE9]> <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shi ...
css 兼容解决方案,css浏览器兼容_CSS浏览器兼容性问题及解决方案
摘要腾兴网为您分享:CSS浏览器兼容性问题及解决方案,云南移动,优化大师,央视影音,心视界等软件知识,以及赣教云教学通2.0,少儿趣配音,中辉期货,单机,轻笔记,鸿合实物展台,008神器,酷有,电子 ...
怎样使html兼容各个浏览器,兼容各个浏览器的技巧
1,盒解释器的不同解释. #box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}#box{ ...
html定位浏览器兼容,IE6浏览器不支持固定定位（position：fixed）解决方案
今天在学习的时候,突然发现在IE6浏览器下,position:fixed不管用了: 复制代码代码如下: New Document 正常普通流元素 position:fixed元素上面的代码在IE6中 ...
html5 定义width不兼容,CSS-宽度自适应和浏览器兼容笔记
自适应宽度自适应:网页元素根据窗口或子元素自动调整宽度适用百分比进行设置,例如:100% 铺满:50% 占据一般宽度块元素如果不设置宽度,默认为100% 自适应中可以设置最大或者最小宽度和高度 ...
前端浏览器兼容问题总结
浏览器占比现状在各大浏览器厂商的发展过程中,他们其实对web的标准都有不同的实现,因为实现的标准的不同,所以会有兼容性的产生,早期IE是在浏览器的世界中,占据主导地位.所以它自身实现了很多不同于标准 ...

html5在不同浏览器兼容,HTML5浏览器兼容性解决方案

html5在不同浏览器兼容,HTML5浏览器兼容性解决方案相关推荐

最新文章

热门文章