[HTML5] 让IE支持HTML5的方法
越来越多的站点开始使用 HTML5 标签,但是目前的情况是还有很多人在使用IE6、IE7、IE8。为了让所有浏览者都可以正常的访问,解决方案有下面两个:
1.为网站创建多套模板,通过程序对User-Agent的判断为不同的浏览器用户显示不同的页面,例如:优酷网。
2.使用Javascript来使不支持HTML5的浏览器支持HTML标签。
针对IE比较好的解决方案是html5shiv。htnl5shiv主要解决HTML5提出的新的元素不被IE6-8识别,这些新元素不能作为父节点包裹子元素,并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行 document.createElement(elementName) 即可实现。html5shiv就是根据这个原理创建的。
html5shiv的使用非常的简单,考虑到IE9是支持html5的,所以只需要在页面head中添加如下代码即可:
<!-–[if lt IE 9]--><script src=" http://html5shiv.googlecode.com/svn/trunk/html5.js "></script ><!--[endif]–- >
下面是一些补充:
当然包括本人BLOG在内。关于HTML5不得不提IE,在苹果、Google、Opera和Mozilla等主流浏览器厂商积极参与新版本HTML标准的制定和推广时,微软却对HTML 5规范不屑一顾。然而微软近期才表态要在IE中支持HTML 5,以致到今天为止的IE8及以下是无法支持HTML5标签的。但在sitepoint找到了让IE支持HTML5办法。
以下是在的IE 8显示的例子,未作处理前:

让IE(包括IE6)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,这是一个简单的document.createElement声明,利用条件注释针对IE在对象中创建对应的节点
<!--[if IE]>
<script>
document.createElement("header");
document.createElement("footer");
document.createElement("nav");
document.createElement("article");
document.createElement("section");
</script>
<![endif]-->
添加以上代码后,在IE8中显示的效果如下:

sitepoint例子中创建节点的JavaScript代码似乎过于臃肿,在smashingmagazine提供的代码似乎更简洁。
<!--[if IE]>
<script>
(function(){if(!/*@cc_on!@*/0)return;var e = "header,footer,nav,article,section".split(','),i=e.length;while(i--){document.createElement(e[i])}})()
</script>
<![endif]-->
HTML5在默认情况下表现为内联元素,对这些元素进行布局我们需要利用CSS手工把它们转为块状元素,如下例:
header, footer, nav, section, article {
display:block;
}
相关资源:http://www.csdn.net/tag/html5
[HTML5] 让IE支持HTML5的方法的更多相关文章
- 让老版本IE支持HTML5
一直想入手C3和H5,但因为所开发的项目一直要求兼容IE7,IE8.而这两个浏览器并不支持html5,所以一直都在观望而未真正的投入太多精力去学习.尽管我知道h5和c3是主流. 在最近的项目开发中,偶 ...
- 让ie浏览器支持html5新标签的解决方法(使用html5shiv)
没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览 ...
- 4种检测是否支持HTML5的方法,你知道几个?
4种检测是否支持HTML5的方法,你知道几个? 1,检查特定的属性是否存在于全局的对象里面,比如说window或navigator. 比如geolocation,它是HTML5新加支持的新特性:它是由 ...
- 低版本浏览器支持HTML5标签的方法
最近刷了一道面试题,是关于低版本浏览器支持HTM5标签的写法,在网上找了一些,都行之有效,但是缺少整体总结,所以在这里总结一下,方便其他人过来阅读. IE低版本需要支持HTML5标签: 方法1.传统引 ...
- html5.js让IE(包含IE6)支持HTML5元素方法
原文地址:http://blog.sina.com.cn/s/blog_62a36ec401018oqb.html html5.js让IE(包含IE6)支持HTML5元素方法 微软的最新浏览器IE8及 ...
- 让更多浏览器支持html5元素的简单方法
当我们试图使用web上的新技术的时候,旧式浏览器总是我们心中不可磨灭的痛!事实上,所有浏览器都有或多或少的问题,现在还没有浏览器能够完整的识别和支持最新的html5结构元素.但是不用担心,你依然可以在 ...
- 让IE6,7,8支持HTML5新标签的方法
很多网站对网页进行重构的时候,提高标签的语义性,在网页中大量使用了section,article,header等HTML5新标签.考虑到目前win7自带的IE浏览器版本是IE8,而IE8不支持HTML ...
- HTML5的浏览器支持方案
现代的浏览器基本都支持 HTML5,此外还有老浏览器. 不管是旧的还是最新的,HTML5对无法识别的元素会作为内联元素自动处理. 所以,在这里教大家怎么让浏览器去处理"未知"的HT ...
- [C#]如何让webbrowser控件支持Html5
最近因为项目的需要,需要研究在C#winform窗体中加载网页,和弹出提醒,但我们的网站是HTML5的,ie浏览器内核不支持,而且因为根据客户机系统的不一致,加载的ie内核可能是不同,显示的效果也会不 ...
随机推荐
- Android 解决小米手机Android Studio安装app 报错的问题It is possible that this issue is resolved by uninstalling an existi
Android Studio升级到2.3版本之后,小米手机MIUI8不能运行Android Studio程序,报如下错误: Installation failed with message Faile ...
- ★Java语法(七)——————————循环语句
package 自我总结; public class 循环语句 { public static void main(String[] args) { // while 循环 // 用法: // whi ...
- JavaScript编程题(一)
使用Javascript脚板输出如图所示的效果页面: 使用document.write()输出水平线 使用循环控制每个水平线的长度 答案:<!doctype html> <html ...
- JAVA 构建使用 Native 库
Java 使用Native文件,一般分解为下面几个步骤: 在Java代码中使用native关键字声明一个本地方法 运行javah,获得包含该方法声明的C语言头文件(使用jni编程中的C函数名通常是相关 ...
- 【sqli-labs】 less31 GET- Blind -Impidence mismatch -Having a WAF in front of web application (GET型基于盲注的带有WAF注入)
标题和less30一样 http://192.168.136.128/sqli-labs-master/Less-31/login.php?id=1&id=2" ")闭合的 ...
- centos7下安装python3 解决openssl等一系列问题
最近折腾了下centos7,发现按正常方法安装python3.7后面会出现各种操蛋的问题. 主要的问题有三个,openssl版本过低,'_ctypes'缺失,以及安装后sqlite3缺失.下面我会贴出 ...
- BZOJ [POI2004]PRZ 状压DP_二进制_骚操作
二进制就是比谁更sao... Code: #include <bits/stdc++.h> #define setIO(s) freopen(s".in"," ...
- 操作符重载(day07)
二十 操作符重载 eg:复数x+yi +4i (+2i) + (+4i) = +6i 双目操作符(L # R) 1.1 运算类的双目操作符:+ - * / -->左右操作数可以是左值也可以是右值 ...
- ro多层的事务处理失败的困惑
现象: 用 :: ::'' 在客户端用上面的语句取得数据,然后修改数据,通过RO的web service提交数据失败: 用 -- ::-- ::'‘ 在客户端用上面的语句取得数据,然后修改数据,通过R ...
- 【ZOJ 4062】Plants vs. Zombies
[链接] 我是链接,点我呀:) [题意] [题解] 二分最后的最大抵御值mid. 然后对于每个蘑菇. 都能算出来它要浇水几次mid/ai 然后如果第i个蘑菇没浇水达到要求次数. 就在i和i+1之间来回 ...