处理HTML5新标签的浏览器兼容版问题

最新推荐文章于 2021-06-27 11:57:30 发布

dolinyuan

最新推荐文章于 2021-06-27 11:57:30 发布

阅读量1k

点赞数

IE8（不包括IE8）要支持HTML5新标签，需添加JavaScript+CSS
JavaScript代码：

var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
var i= e.length;
while (i--){
    document.createElement(e[i])
}

CSS代码：

article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}
mark{background:#FF0;color:#000}

或者添加成熟的 html5shim框架，html5shim的使用方法很简单，在页面的head部分添加框架的引用
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

<![endif]-->

广义的HTML5是包括了HTML5、CSS3以及新的API，如何让他的新特性能够向后兼容

检测浏览器是否支持新特性的框架，推荐Modernizr。它的原理是自动检测浏览器是否支持新特性，并在<html>标签上添加对应的类。如果浏览器支持某个特性，则会添加一个以特性名称命名的类，反之，则添加一个以“no-”为前缀加上特性名称命名的类。同时也会生成一个名为modernizr的对象，通过判断此对象上的代表各特性的属性值，可以知道当前浏览器是否支持此新特性。Modernizr框架同时也包含了html5shim框架的功能，即可以让IE8及以下浏览器支持新标签。
1. Modernizr的使用，在head里添加：<script src="js/modernizr.min.js"></script>
2. 其次在html标签上添加一个名称为no-js的类
如果浏览器没有禁用JavaScript，则浏览器加载页面后，html标签上的类会动态替换和添加如下：

<html class="js canvas canvastext geolocation rgba hsla no-multiplebgs borderimage borderradius boxshadow opacity no-cssanimations csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions  video audio cufon-active fontface cufon-ready">

在CSS代码中，可以通过使用这些类添加向后兼容代码，如下是一个使用多背景图的例子：

#nice {
    background: url(background-one.png) top left repeat-x;
}
.multiplebgs #nice {
    background: url(background-one.png) top left repeat-x,url(background-two.png) bottom left repeat-x;
}

音频兼容的最佳的方式是提供MP3和Ogg两种格式。

<audio controls>
    <source src="elvis.mp3" type='audio/mpeg; codecs="mp3"'>
    <source src="elvis.oga" type='audio/ogg; codecs="vorbis"'>
    <!-- 向后兼容代码：如，显示提示信息、提供下载链接使用flash播放器等 -->
    浏览器不支持<code>audio</code>标签
</audio>

视频兼容最佳的方式是提供WebM和MP4两种格式的视频：

<video controls>    
    <source src=video.webm type=video/webm>    
    <source src=video.mp4 type=video/mp4>      
    <!—向后兼容代码: -->      
    <iframe width="480" height="360" src="http://www.youtube.com/embed/xzMUyqmaqcw?rel=0" frameborder="0" allowfullscreen></iframe>  
</video>

参考引用：http://www.jb51.net/html5/540317.html