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

来自：让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>

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

Javascript:

推荐阅读

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