让ie6\7浏览器识别HTML5标签

近几年WEB前端发展日趋成熟，DIV布局已经作为前端人员的必修课，DIV+CSS可以让Web页面展现无所不能，但当DIV滥用时，各种混乱div布局导致代码可读性极低。此时yahoo最先提倡标签语义化和classname语意命名，但HTML4.01中的标签数目比较小，对于日新月异的web布局支持实在有限，语意到最后的结果就是，classname无数,为语意存在的各种单词、拼音、字母充斥在页面。

HTML5 w3c已经推出有很长一段时间了，新增的标签也是为了以上弊端以及新功能。下面让ie6\7识别HTML5新增标签这种方法其实是一个取巧。这种做法对于代码洁癖者是个福音，也符合渐进增强Progressive Enhancement、优雅降级（Graceful Degradation）的原则，“好奇害死猫”，往下看，也让我们尝尝鲜吧。

下面先看看HTML5标签搭建的简单博客 » HTML5 Demo

一段简单的脚本，让ie6、ie7能识别HTML5新增标签，脚本如下：

Javascript:

(function(){if(!/*@cc_on!@*/0)return;
	var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,hgroup,header,mark,menu,meter,nav,output,progress,section,time,video".split(','),
	i=0,
	length=e.length;
	while(i<length){
		document.createElement(e[i++])
	}
})();

其中@cc_on声明用于激活条件编译，作用是判断浏览器类型。语法类似：

if, elseif, else logic (IE exclusive) 判断老版本IE浏览器
/*@cc_on
   @if (@_jscript_version >= 5)
      document.write("IE Browser that supports JScript 5+");
   @elif (@_jscript_version >= 4)
      document.write("IE Browser that supports JScript 4+");
   @else
      document.write("Very old IE Browser");
   @end
@*/

新增的标签有：abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,hgroup,header,mark,menu,meter,nav,output, progress,section,time,video,这些标签只是在表现上有效。

现如今能支持的HTML5标签的浏览器实在太多，避免浏览器加载这段脚本可以用if ie 的注释判断。做法的好处是尽量不影响正常浏览器对HTML5标签的解释。

<!--[if IE]>
<script type="text/javascript">
(function(){if(!/*@cc_on!@*/0)return;
var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,hgroup,header,mark,menu,meter,nav,output,progress,section,time,video".split(','),
i=0,
length=e.length;
while(i<length){
	document.createElement(e[i++])
}
})();
</script>
<![endif]-->

为了让ie的这些标签展现和其他浏览器一致，建议加入以下CSS

header,nav,aside,menu,figure,article,time,footer{display:block;}

切记HTML5的DTD写法

<!DOCTYPE html>
<html lang="zh">

下面是一个简单的HTML5的尝试

<header>
	<h1>Hello World!</h1>
	<nav>
		<ul>
			<li><a href="">主页</a></li>
			<li><a href="">相册</a></li>
			<li><a href="">留言</a></li>
		</ul>
	</nav>
</header>
<aside>
	<figure>文章描述</figure>
	<menu>
		<h3>相关栏目</h3>
		<ol>
			<li>栏目1</li>
			<li>栏目2</li>
			<li>栏目3</li>
		</ol>
	</menu>

</aside>
<article class="post">
	<h2><a href="" rel="entry-title">谈前端框架设计</a></h2>
	<time datetime="2010-03-02T15:54:28-07:00">2010 03 02 15:10 pm</time>
	<div class="entry-content">
	内容...
	</div>
</article>
<footer><abbr>A HTML5 Markup towards</abbr>Copyright</footer>

Please send bug reports to idd.chiang[At]gmail.com