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

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

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页