有些浏览器并不支持HTML5中的新增元素，如IE8或更早版本。想要应用样式，可以头部标记<head>中加入下面JavaScript代码
 <html>

 <head>

 <meta charset=uft-8"/>

 <style>

 header{

     color: red;

     width: 500px;

 }

 </style>

 <script>document.createElement("header")</script>

 </head>

 <body>

 <header>Hello world!</header>

 </body>

 </html>

对重点就是document.createElement。考虑各个浏览器兼容性不同，可以对上面JS代码进行优化，即使用条件语句包含JS代码

IE9以下版本的IE将创建HTML5标签， 非IE浏览器会忽略这段代码，因此不会发生http请求，也就不影响网页执行效率。

 <script>

 (function() {

 if (!

 /*@cc_on!@*/

 0) return;

 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])

 }

 })()

 </script>

最后在css里面加上这段：

/*html5*/ article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
主要是让这些html5标签成块状，像div那样。

另外还有种能让IE识别那些新元素的途径就是使用HTML5 shiv，html5shiv的使用非常的简单，在你的网页中引入Google的html5shiv包（已经写好的直接可调用）在页面head中即可

 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

一定要加在<head></head>里调用 (因为浏览器必须先解释了这个脚本才能解析后面的html5标签，所以不能放在页面底部）

下载地址: http://html5shiv.googlecode.com/svn/trunk/html5.js

浏览器不支持HTML5的更多相关文章

  1. 新Chrome浏览器不支持html5的问题

    window.applicationCache事件,最新chrome浏览器已经不能判断是否支持html5: 之前,在IE和Google中 为ApplicationCache对象,而在FF中为 Offl ...

  2. 判断浏览器是否支持HTML5 video

    话不多说,下面是我从W3C扒的判断浏览器是是否支持H5视频的代码,有需要的小伙伴,拿走不谢 HTML <div id="checkVideoResult"><bu ...

  3. ie8下面版本号（包含ie8）的浏览器不支持html5标签属性解决方式（Modernizr 2.6.2插件的使用）

    我这边申明下:我写这篇日志主要是想然ie8可以支持html5的个别标签闭合,并不能让ie全然支持html5.我之前写的可能会误导非常多同学.希望大家能明确. 今天脑抽想用html5标签设计一个网页.我 ...

  4. 解决浏览器不支持HTML5和CSS3

    Modernizr插件可用于解决:<响应式web设计>提及! 其他: 第一种方法:IE9以下版本的IE将创建HTML5标签, 非IE浏览器会忽略这段代码,因此不会发生http请求,也就不影 ...

  5. 让所有的浏览器都支持html5

    <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" ...

  6. 判断浏览器是否支持html5和css3属性

    本文章内容是由一个前辈写的. CSS3特有的属性moz-Transform //判断是否具有相应属性 testProps: function (props) { var i; for (i in pr ...

  7. 添加shiv让所有现代浏览器都支持 HTML5 语义元素 html5.js让IE（包括IE6）支持HTML5元素方法

    引用Google的html5.js文件 <!--[if IE]> <script src=”http://html5shiv.googlecode.com/svn/trunk/htm ...

  8. JS检测浏览器是否支持HTML5视频播放 (标签<video>) ,

    function checkVideo() { if (!!document.createElement('video').canPlayType) { var vidTest = document. ...

  9. 判断当前浏览器是否支持HTML5的日期控件

    function checkSupportH5Date(){ var i = document.createElement("input"); i.setAttribute(&qu ...

随机推荐

  1. Summarize code for the three presentation experiments

    Image Picker Controller @IBAction func experiment() { let controller = UIImagePickerController() sel ...

  2. 利用js+canvas实现的时钟效果图

    canvas+js时钟特效 运用js+canvas方面的知识完成一个时钟的效果图,再利用for循环实现指针的转动效果: <!--网页文档的声明--> <!doctype html&g ...

  3. 巩固一下C语言中的指针

    今天无意间看到一篇文章<[C语言] 浅谈指针>,对C语言指针的总结很好! 文章地址:http://blog.csdn.net/wbq1480/article/details/5150612 ...

  4. （转载）实现QQ侧滑边栏

    Android ViewDragHelper实现QQ侧滑边栏 移动手机版的QQ的左边侧栏,有一个特殊的交互设计效果:当用户手指向右或向左滑动时,QQ的左边会弹出或收缩一个侧滑的边栏.这种效果简单的做法 ...

  5. 【Weblogic】--Weblogic的部署方式和缓存

    参考网址: http://dead-knight.iteye.com/blog/1938882 Weblogic11g部署web应用,有三种方式,非常简单,但是很多新手部署总是出现若干错误,不知道如何 ...

  6. svn的使用！！！

    1.SVN:subversion(子级源代码版本控制管理软件) 2.SVN的作用 (1)避免开发同一项目不会出现代码覆盖. (2)同一文件可以创建许多不同的版本,并可以随时查看不同版本的内容. (3) ...

  7. 使用Polly让程序有Retry的机制

    有时候我们需要调用其他API的时候出现暂时连接不通超时的情况,那这时候可以通过Polly进行Retry. 1.从nuget引用polly, 2.定义需要处理的异常有哪些,比如 Policy.Handl ...

  8. C# 标准查询表达式

    一.标准查询运算符 1.C#提供了标准查询运算符,例如我想选择专利一系列(pantents)中以年份19开头的专利,可以用如下语句: IEnumerable<Patent> pantent ...

  9. Oracle数据迁移至MySQL

    ORACLE DB: 11.2.0.3.0 MYSQL DB: 5.5.14 因项目需求,需要将ORACLE生产中数据迁移至MYSQL数据库中作为初始数据,方法有如下几种: 1.ORACLE OGG ...

  10. Android--简单开发和使用ContentProvider数据共享

    今天学习的时候学到了ContentProvider数据共享这个东东,所以自己写了个小例子: 我们要开发ContentProvider的话,需要创建一个类去继承ContentProvider,里面会让你 ...