有些浏览器并不支持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. linux安装桌面环境（GNOME）VNC连接Linux

    1.安装Gnome桌面 这里是使用的脚本安装.代码如下:  加附件 #!/bin/sh #This script is FREE and written by www.vpsyou.com   # i ...

  2. Windows Server 2003搭建FTP服务器 实现盘符之间切换

     Serv-U中设置虚拟目录的方法 如果在E盘下有一个名为LoveHina的目录,在F盘下也有一个名为LoveHina的目录.那么,如何让使用同一个账号的用户可以同时访问这两个目录呢? 我们可以使用S ...

  3. Knockout.Js官网学习（html绑定、css绑定）

    Html绑定 html绑定到DOM元素上,使得该元素显示的HTML值为你绑定的参数.如果在你的view model里声明HTML标记并且render的话,那非常有用. 简单示例 <div dat ...

  4. .Net 内存泄露

    一.事件引起的内存泄露 1.不手动注销事件也不发生内存泄露的情况 我们经常会写EventHandler += AFunction; 如果没有手动注销这个Event handler类似:EventHan ...

  5. mongodb 修改数据结构的一个例子以及小梳理

    mongodb的存储结构是灵活可变的,但是,并不意味着我们就肆意地使用不规则的文档结构.不规则的文档结构对于开发和后期的维护都是一个灾难.所以,还是要有一个约定的格式. 但是,由于前期设计的不周详和其 ...

  6. Android照相机应用

    前言 Android在设计架构的时候,采用了mashup(混搭)的设计理念,也就是说一切都是组建,自己写的是组件,别人提供的也是组件,使用的时候只要符合相关协议就可以把他们当作自己的组件.比如系统提供 ...

  7. 利用crontab自动更新SVN代码

    shell.sh#!/bin/sh source ~/.bash_profile LANG=en_US.UTF- cd /opt/web/hzcms/ svn up >> /opt/web ...

  8. SequoiaDB的数据分区操作

    在SequoiaDB集群环境中,用户往往将数据存放在不同的逻辑节点与物理节点中,以达到并行计算的目的. 分区:把包含相同数据的一组数据节点叫一个分区,如上图绿色方块组成三个分区. 分区键:切分时,所依 ...

  9. GetProperties(BindingFlags)说明

    Instance|Public:获取公共的的实例属性(非静态的) Instance|NonPublic:获取非公共的的实例属性(非静态的).(private/protect/internal) Sta ...

  10. MarkDown写作技巧

    前言 年轻的我们往往苦恼于没有充实的社会经历.社会阅历,很难有较强的个人能力.个人魅力!就个人能力而言,本 人主要把它分为两种:“吸收能力”和“输出能力”.吸收能力主要体现了个人对外界知识的摄入能力, ...