有些浏览器并不支持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字符设备和块设备的区别

    系统中能够随机(不需要按顺序)访问固定大小数据片(chunks)的设备被称作块设备,这些数据片就称作块.最常见的块设备是硬盘,除此以外,还有软盘驱动器.CD-ROM驱动器和闪存等等许多其他块设备.注意 ...

  2. Linux下vi编辑器粘贴复制剪切功能

    RedHat 9.0 Linux下vi编辑器实现简单的粘贴复制剪切功能": 如果想把文件内的第三行内容黏贴到第十五行: 1.进入你的文件,(处于命令模式,而不是编辑模式) 2.将你的光标移到 ...

  3. C++获取得到图片的坐标和rgb

    #include <iostream> #include <fstream> #include <string> #include <windows.h> ...

  4. HUE 忘记密码

    解决方法: 启动HUE的Shell /opt/cloudera/parcels/CDH/lib/hue/build/env/bin/hue shell from django.contrib.auth ...

  5. linux iostat命令详解 磁盘操作监控工具

    Linux系统中的 iostat是I/O statistics(输入/输出统计)的缩写,iostat工具将对系统的磁盘操作活动进行监视. 它的特点是汇报磁盘活动统计情况,同时也会汇报出CPU使用情况. ...

  6. 7-ZIP实现数据高度压缩

    From:http://www.cnblogs.com/killerlegend/p/3746395.html Author:KillerLegend Date:2013.5.22 选中文件,鼠标右键 ...

  7. 支付宝收款连接 非API

    <a href="https://shenghuo.alipay.com/send/payment/fill.htm?_form_token=mMYOrAXfReOtBBCMmoaK7 ...

  8. 2016/09/21 java关键字static

    1.static方法     static方法一般称作静态方法,由于静态方法不依赖于任何对象就可以进行访问,因此对于静态方法来说,是没有this的,因为它不依附于任何对象,既然都没有对象,就谈不上th ...

  9. STM32F4_RCC系统时钟配置及描述

    Ⅰ.概述 对于系统时钟应该都知道它的作用,就是驱动整个芯片工作的心脏,如果没有了它,就等于人没有了心跳. 对于使用开发板学习的朋友来说,RCC系统时钟这一块知识估计没怎么去配置过,原因在于开发板提供的 ...

  10. instanceof、==号、Objetc类

    1)instanceof: 判断某个对象是否为某个类的实例,注意多态的运用,一个父类引用指向子类的对象,根据继承,子类就是父类,所以子类也可以看做是父类的一个实例.  形式:引用 instanceof ...