有些浏览器并不支持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. [leetcode]_Climbing Stairs

    我敢保证这道题是在今早蹲厕所的时候突然冒出的解法.第一次接触DP题,我好伟大啊啊啊~ 题目:一个N阶的梯子,一次能够走1步或者2步,问有多少种走法. 解法:原始DP问题. 思路: 1.if N == ...

  2. DELPHI XE5 FOR ANDROID 模仿驾考宝典 TMEMO 控件随着字数增多自动增高

    在一个安卓需求中,需要模仿驾考宝典的详解部分.琢磨了好几天.终于搞定: MemoAns.Height:=10;//MEMO控件赋初始高度值 MemoAns.Lines.Clear; MemoAns.W ...

  3. Delphi的基本函数

    Delphi的基本函数 函数由一句或多句代码组成,可以实现某个特定的功能.使用函数可以使代码更加易读.易懂,加快编程速度及减少重复代码.过程与函数类似,过程与函数最重要的区别在于,过程没有返回值,而函 ...

  4. 第三章 管理程序流(In .net4.5) 之 实现程序流

    1. 概述 本章内容包括 布尔表达式.流控制方式.集合遍历 以及 流跳转. 2. 主要内容 *由于该章内容比较基础,日常用的也很多,故对一些常用的基础内容不再赘述. 2.1 使用布尔表达式 熟悉下列比 ...

  5. Pure扩展站--个人博客

    作为自己css的练习站:http://1111.oyostar.com/.更新自己扩展pure写的css,外加一些jquery的插件.感谢朋友的空间和子域名!

  6. 007-python基础-pyc是什么

    3.1 解释型语言和编译型语言 计算机是不能够识别高级语言的,所以当我们运行一个高级语言程序的时候,就需要一个"翻译机"来从事把高级语言转变成计算机能读懂的机器语言的过程.这个过程 ...

  7. TAT 前端突击队 第四关 题目 腐蚀的画

    腐蚀的画 1.一个漂亮的画作在经过几千年岁月的洗礼下,部分地方已经被腐蚀了,像一个孤独的老人,满脸爬满了皱纹.2.但在一个晚上,老王突然发现,这些腐蚀的部分中,隐藏着岁月留下的密秘.请你帮助老王寻找这 ...

  8. c++编程规范的纲要和记录

    这是一本好书, 可以让你认清自己对C++的掌握程度.看完之后,给自己打分,我对C++了解多少? 答案是不足20分.对于我自己是理所当然的问题, 就不提了, 记一些有启发的条目和细节: (*号表示不能完 ...

  9. ECMAScript5

    张鑫旭:ECMAScript5介绍 淘宝整理的es5-safe /********* It provides the following methods: Function.prototype.bin ...

  10. 在 Ubuntu 13.10 中搭建Java开发环境 - 懒人版

    本文记录我在Ubuntu 13.10中搭建Java开发环境. 本文环境: Ubuntu 13.10 x64运行在Win7下的VMware Workstation 10中. 1. 安装JDK与JRE s ...