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

转载 2018年04月16日 18:14:55
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

浅谈HTML5新标签的浏览器兼容问题

HTML5 现在已经不是SGML的子集,主要是关于图像,位置,存储,多任务等功能的增加 ① 新特性: 1)绘画 2)用于媒介回放的和 3)本地离线存储长期存储数据,浏览器关闭后数据不丢失 4)的数...
  • zhouziyu2011
  • zhouziyu2011
  • 2017-02-28 11:37:45
  • 3028

怎么处理HTML5的新标签对IE浏览器兼容问题?

方法一: IE6~IE8支持通过document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签,浏览器支持新标签后,还需要添加标签默认的样式。 ...
  • wangweiscsdn
  • wangweiscsdn
  • 2017-06-13 11:18:00
  • 531

html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?

*HTML5 现在已经不是SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。 *绘画canvas    用于媒介回放的video 和audio 元素   本地离线存储local...
  • wang1006008051
  • wang1006008051
  • 2017-10-08 19:22:48
  • 385

html5有哪些新特性?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?

(Q1)  HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。 (1)绘画 canvas; (2)用于媒介回放的 video 和 audio 元素; ...
  • palette_
  • palette_
  • 2017-05-02 21:10:16
  • 1074

不兼容HTML5标签的浏览器解决代码

pageEncoding="UTF-8"%> Equipment Manager
  • u011380813
  • u011380813
  • 2015-03-11 09:41:32
  • 510

如何解决H5新标签兼容问题

目前HTML5已向开发人员提供了很多新的标签,如section,nav,article,header和footer等。这些标签语义化程度高,会被经常使用,但在IE6,IE7,IE8和Firefox 2...
  • Bessicxie
  • Bessicxie
  • 2017-11-02 09:35:45
  • 399

html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和HTML5?

html5有哪些新特性,移除了那些元素?如何处理html5新标签的浏览器兼容问题 article;IE7/。 2,还新增了以下的几大类元素,利用这一特性让这些浏览器支持HTML5新标签,tt、hea...
  • ermao_zbp
  • ermao_zbp
  • 2017-11-16 14:04:16
  • 351

HTML5新增标签最有用的总结

HTML5新增标签:概要1. HTML5 简介: (HTML5 是目前-2017年来说,是最新的一代HTML标准)2. HTML5 一些新的规则: 新特性应该基于 HTML、CSS、DOM 以及...
  • AndyNikolas
  • AndyNikolas
  • 2017-02-06 16:50:47
  • 6903

html5中table标签

如果你现在开始用html5的声明来写页面时,你会发现在定义table的cellspacing和cellpadding时被提示该属性已过时或者提示非法属性。具体原因是在html5中table标签的这两个...
  • u011488769
  • u011488769
  • 2015-07-07 14:46:06
  • 729

HTML5新增的标签和属性归纳

收集总结的HTML5的新特性,基本除了IE9以下都可以使用。 HTML5语法 大部分延续了html的语法 不同之处:开头的 字符编码变得简洁, 不区分大小写...
  • garvisjack
  • garvisjack
  • 2017-01-27 11:21:24
  • 10132
收藏助手
不良信息举报
您举报文章:处理HTML5新标签的浏览器兼容版问题
举报原因:
原因补充:

(最多只允许输入30个字)