当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 让IE支持HTML5办法

HTML/XHTML教程
CSS 循序渐进(四)表里春秋
精通 CSS 滤镜(五)
让css使网页图片半透明
实现页面图片阴影特效
发现CSS控件的好处
用CSS缩写给你的网站加速
CSS在IE和Nascape的显示差别
利用CSS,不通过replace替换标引HTML标记
拒绝单调 让网页超链接拥有多姿多彩的下划线
对CSS类及id的规范化命名
利用css里expression来实现界面对象的批量控制
利用CSS控制打印
第一章 CSS的基本认识
第二章 CSS的应用方式
第三章 CSS的应用补充
第四章 颜色背景的CSS
第五章 文字性质的CSS
第六章 区块性质的CSS
HTML之其他标记
HTML之链接标记

HTML/XHTML教程 中的 让IE支持HTML5办法


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-03   浏览: 65 ::
收藏到网摘: n/a

HTML5预计是在2022年发布,但我认为它距离我们并不是那么遥远,因为在html5gallery就例举了大量正在使用HTML5的站点,当然包括本人BLOG在内。关于HTML5不得不提IE,在苹果、Google、Opera和Mozilla等主流浏览器厂商积极参与新版本HTML标准的制定和推广时,微软却对HTML 5规范不屑一顾。然而微软近期才表态要在IE中支持HTML 5,以致到今天为止的IE8及以下是无法支持HTML5标签的。但在sitepoint找到了让IE支持HTML5办法。

以下是在的IE 8显示的例子,未作处理前:
在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中显示的效果如下:
在IE 8显示的例子,处理后

sitepoint例子中创建节点的JavaScript代码似乎过于臃肿,在smashingmagazine提供的代码似乎更简洁。
Demo:http://blog.gulu77.com/demo/200908/html5_demo3.html

<!--[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;
}