有些浏览器并不支持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. C puzzles详解【26-30题】

    第二十六题(不会) The following is a simple program which implements a minimal version of banner command ava ...

  2. （一）、NodeJS （转载）

    NodeJS基础                                                 ------ 转载自阿里巴巴 什么是NodeJS JS是脚本语言,脚本语言都需要一个解 ...

  3. 一些CSS"bug"

    1.img三像像素问题 解决办法:img{display:block;} or img{vertical-align:middle;} 问题原因:img是行内元素,默认的垂直对齐方式 baseline ...

  4. [原]Python Web部署方式总结

    不要让服务器裸奔 学过PHP的都了解,php的正式环境部署非常简单,改几个文件就OK,用FastCgi方式也是分分钟的事情.相比起来,Python在web应用上的部署就繁杂的多,主要是工具繁多,主流服 ...

  5. linux中文显示乱码的解决办法

    linux中文显示乱码的解决办法 linux中文显示乱码是一件让人很头疼的事情. linux中文显示乱码的解决办法:[root@kk]#vi /etc/sysconfig/i18n将文件中的内容修改为 ...

  6. 一个表格说明RelativeLayout中的几个重要属性【Written By KillerLegend】

      RelativeLayout中几种布局属性的说明 无 无 无 无

  7. ace 读取excel

    insert into T_BirdSystemSku(ID,Sku) select ID,SKU from OpenRowSet('Microsoft.ACE.OLEDB.12.0', 'Excel ...

  8. ok6410的DMA裸机总结

    1.为何使用DMA:为了提高CPU的工作效率,避免多余的等待时间 2.关于DMA控制器:(1)通道数:2440有4个通道,6410有4个DMA控制器(初始化的时候要选择),32个通道.210有两种DM ...

  9. Python 2.7的安装（64位win10）

    Python 2.7.12 下载地址:https://www.python.org/downloads/release/python-2712/ 安装路径D:\Program Files\Python ...

  10. [terry笔记]更改oracle用户名

    更改oracle的用户名 之前有个需求,整理一个schema的表.索引等规划到一个表空间里,利用expdp/impdp然后remap就完成了,但是整理好的用户名remap变更了,应用又不想修改其连接信 ...