处理html5标签兼容性,浏览器不兼容h5标签
毕竟HTML5规范刚刚定义，有些浏览器还不能支持新的标签和属性，尤其是IE8及以下的浏览器。下面介绍一些在页面中使用HTML5新标签的实用方法，让HTML5中的新标签在低级浏览器中得到有限的支持，并且不会影响整个页面的功能。
让浏览器识别HTML5规范中的新标签IE8浏览器还没有增加对HTML5新标签的支持，所以HTML5新标签中的内容无法直接在IE8中显示。幸运的是，IE8/IE7/IE6支持由document.createElement方法生成的标签。你可以利用这个特性让这些浏览器支持HTML5新标签。代码如下：
var e=abbr，article，side，audio，canvas，datalist，details，dialog，eventsource，figure，footer，header，hgroup，mark，menu，meter，nav，output，progress，section，time，video 。拆分(，)；var i=e .长度；while(I-){ document . createelement(e[I])}浏览器支持新标签后，还需要添加标签的默认样式：
文章、旁白、图片标题、图表、页脚、页眉、组、导航、节{ display:block }标记{ background:# FF0；Color:#000}所以两个简单的JavaScript代码和CSS代码就可以让IE8及以下浏览器支持HTML5中的新标签。当然，最好的方法是直接使用成熟的框架。目前基于这种思想的框架有很多，使用最多的是html5shim。html5shim的使用方法很简单，在页面头部添加框架的引用即可：
！-[if lt IE 9]script src= http://html 5 shim . Google code . com/SVN/trunk/html 5 . js /script！[Endif]-HTML5中新特性的向后兼容广义的HTML5包括HTML5、CSS3和新的API。因为新功能或多或少会存在与浏览器的兼容性问题，所以在使用新功能时需要检查浏览器是否支持该功能。当浏览器不支持新功能时，可以做适当的向后兼容处理。目前还没有统一的方法来检测新特征。有些新特性可以通过对应的API识别，有些只能通过一些技能识别。幸运的是，国外热心的工程师已经开发了几个检测新特性的框架，其中Modernizr是检测准确率和利用率都比较高的一个。
Modernizr框架的原理是自动检测浏览器是否支持新功能，并为html标签添加相应的类。如果浏览器支持某个功能，它会添加一个以该功能名称命名的类；否则，它将添加一个以前缀“no-”和特性名命名的类。同时会生成一个名为modernizr的对象，通过判断这个对象上代表各个特性的属性值就可以知道当前浏览器是否支持这个新特性。Modernizr框架还包括html5shim框架的功能，即可以让IE8及以下浏览器支持新标签。
Modernizr的使用方法很简单。首先，在head部分介绍框架的JavaScript文件：
script= js/modernizr . min . js /script其次，在html标签上添加一个名为no-js的类：
Class= no-js 如果浏览器中没有禁用JavaScript，html标记上的类将在浏览器加载页面后被动态替换和添加。加载后，html标记如下所示：
html class= js canvastext geolocation rgba HSLA NO-multiple bgs border image borderradius box shadow opacity NO-CSS animations CSS columns NO-CSS gradients NO-CSS Reflections CSS Transforms NO-CSS Transforms 3D NO-CSS Transitions Video Audio Cuf ON-Active Font Face Cuf ON-Ready 在CSS代码中，可以使用这些类添加向后兼容的代码。以下是使用多背景图像的示例：
# nice { background:URL(background-one . png)左上重复-x；}.multiple bgs # nice { background:URL(background-one . png)左上角repeat-x，url(background-two.png)左下角repeat-x；}对这个框架感兴趣的读者可以浏览Modernizr的官方网站，了解更详细的例子和用法。
音频和视频的兼容音频和视频是页面中常用的多媒体标签，但是浏览器兼容性比较混乱，所以在这里单独讨论。音视频是浏览器原生支持的早期功能，使得音视频的播放不再局限于第三方插件，尤其是移动平台。音视频是一块大蛋糕，所有的浏览器厂商都想得到最大的一块，这也导致了浏览器支持音视频的格式的分化。浏览器支持的音频格式列表如下：
浏览器
版本
支持的格式
微软公司出品的web浏览器
9.0
MP3，AAC
铬
6.0
Ogg Vorbis，MP3，WAV(9.0)
火狐浏览器
3.6
奥格沃尔比斯河
旅行队
5.0
MP3，AAC，WAV
歌剧
10.0
奥格沃尔比斯河
80%左右的浏览器支持HTML5的音频标签，但是没有统一的音频格式。从支持的格式来看，所有浏览器在audio元素上播放音频的最佳方式是提供MP3和Ogg格式。兼容代码如下：
音频控制源src= Elvis . MP3 type= audio/mpeg；codecs= MP3 source src= Elvis . oga type= audio/ogg；编解码器=vorbis ！-向后兼容代码：例如，显示提示信息、提供下载链接和使用flash player等。-浏览器不支持类似于音频的codeaudio/code label /audio video。以下是浏览器支持的格式列表：
浏览器
版本
支持的格式
微软公司出品的web浏览器
9.0
MP4
铬
6.0
MP4，WebM，Ogg
火狐浏览器
3.6
WebM，Ogg
旅行队
5.0
MP4
歌剧
10.0
WebM，Ogg
从浏览器支持的视频格式来看，最好的方式是提供WebM和MP4格式的视频。兼容代码如下：
视频控件源src=video.webm type=video/webm源src=video.mp4 type=video/mp4！—向后兼容代码：-iframe width= 480 height= 360 src= 3358 www.youtube.com/embed/xzmuyqmaqcw? Rel=0 frame border= 0 allow full screen/iframe/video以上是边肖为大家介绍的应对HTML5新标签的浏览器兼容版本问题。希望对你有帮助。如果您有任何问题，请给我留言，边肖将及时回复您。非常感谢您对网站的支持！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。