让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的尝试 HTML5 Demo
<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>