浏览器不支持HTML5
有些浏览器并不支持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的更多相关文章
- 新Chrome浏览器不支持html5的问题
window.applicationCache事件,最新chrome浏览器已经不能判断是否支持html5: 之前,在IE和Google中 为ApplicationCache对象,而在FF中为 Offl ...
- 判断浏览器是否支持HTML5 video
话不多说,下面是我从W3C扒的判断浏览器是是否支持H5视频的代码,有需要的小伙伴,拿走不谢 HTML <div id="checkVideoResult"><bu ...
- ie8下面版本号(包含ie8)的浏览器不支持html5标签属性解决方式(Modernizr 2.6.2插件的使用)
我这边申明下:我写这篇日志主要是想然ie8可以支持html5的个别标签闭合,并不能让ie全然支持html5.我之前写的可能会误导非常多同学.希望大家能明确. 今天脑抽想用html5标签设计一个网页.我 ...
- 解决浏览器不支持HTML5和CSS3
Modernizr插件可用于解决:<响应式web设计>提及! 其他: 第一种方法:IE9以下版本的IE将创建HTML5标签, 非IE浏览器会忽略这段代码,因此不会发生http请求,也就不影 ...
- 让所有的浏览器都支持html5
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" ...
- 判断浏览器是否支持html5和css3属性
本文章内容是由一个前辈写的. CSS3特有的属性moz-Transform //判断是否具有相应属性 testProps: function (props) { var i; for (i in pr ...
- 添加shiv让所有现代浏览器都支持 HTML5 语义元素 html5.js让IE(包括IE6)支持HTML5元素方法
引用Google的html5.js文件 <!--[if IE]> <script src=”http://html5shiv.googlecode.com/svn/trunk/htm ...
- JS检测浏览器是否支持HTML5视频播放 (标签<video>) ,
function checkVideo() { if (!!document.createElement('video').canPlayType) { var vidTest = document. ...
- 判断当前浏览器是否支持HTML5的日期控件
function checkSupportH5Date(){ var i = document.createElement("input"); i.setAttribute(&qu ...
随机推荐
- [原]Hrbust1328 相等的最小公倍数 (筛素数,素因子分解)
本文出自:http://blog.csdn.net/svitter/ 题意: 求解An 与 An-1是否相等. n分为两个情况-- 1.n为素数, 2.n为合数. = =好像说了个废话..素数的时候 ...
- Ubuntu工具:vi编辑器
Vi简介 Vi是“Visual interface”的简称,它在Linux上的地位就仿佛Edit程序在DOS上一样.它可以执行输出.删除.查找.替换.块操作等众多文本操作,而且用户可以根据自己的需要对 ...
- MongoDb 与 Nodejs服务器的启动
1) 启动MongoDB : MongoDB —dbpath databaseNameFolder. 2) 启动数据库 : Mongo DatabaseName. 3) 启动NodeJs: Node ...
- C++求最大公约数
题目内容:求两个正整数的最大公约数. 输入描述:输入数据含有不多于50对的数据,每对数据由两个正整数(0<n1,n2<232)组成. 输出描述:对于每组数据n1和n2,计算最大公约数,每个 ...
- Win10下IIS配置图解、MVC项目发布图解、IIS添加网站图解
Win10下IIS配置 .找到控制面板:[开始]菜单鼠标右击,打开[控制面板] .打开控制面板,点击[程序],点击[启用或关闭Windows功能] 下一步,点击[启用虎关闭Windows功能] . 开 ...
- Linux查看文件以及文件夹的大小
df可以查看一级文件夹大小.使用比例.档案系统及其挂入点,但对文件却无能为力.du可以查看文件及文件夹的大小. df命令可以显示目前所有文件系统的可用空间及使用情形,请看下列这个例子: df命令可以查 ...
- c++编程规范的纲要和记录
这是一本好书, 可以让你认清自己对C++的掌握程度.看完之后,给自己打分,我对C++了解多少? 答案是不足20分.对于我自己是理所当然的问题, 就不提了, 记一些有启发的条目和细节: (*号表示不能完 ...
- 掌握这两个技术点,你可以玩转AppCan前端开发
“AppCan的前端开发其实非常简单,只要掌握两方面的技术即可.一方面是会使用栅格布局完成UI的界面排版,另外一方面就是使用AppCan MVVM模型来完成整个页面构造和用户操作逻辑.” 在2016A ...
- hdu 3530 Subsequence
题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=3530 Subsequence Description There is a sequence of i ...
- scjp考试准备 - 6 - 父类构造器的引用
题一,如下代码的执行结果: class Person{ String name = "No name"; public Person(String nm){name = nm;} ...