让IE6和IE7浏览器支持HTML5标签

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

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

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

  1. (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(','),   
  2.   i=0,  
  3.   length=e.length;    
  4. while(i<length){      
  5. document.createElement(e[i++])   
  6.  }   
  7. })();   

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

if, elseif, else logic (IE exclusive) 判断老版本IE浏览器  

  1. /*@cc_on   
  2.    @if (@_jscript_version >= 5)   
  3.       document.write("IE Browser that supports JScript 5+");   
  4.    @elif (@_jscript_version >= 4)   
  5.       document.write("IE Browser that supports JScript 4+");   
  6.    @else   
  7.       document.write("Very old IE Browser");   
  8.    @end   
  9. @*/   

新增的标签有: 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标签的解释。

  1. <!--[if IE]>   
  2. <script type="text/javascript">   
  3. (function(){if(!/*@cc_on!@*/0)return;   
  4. 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(','),   
  5. i=0,   
  6. length=e.length;   
  7. while(i<length){   
  8.     document.createElement(e[i++])   
  9. }   
  10. })();   
  11. </script>   
  12. <![endif]--> 

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

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

切记HTML5的DTD写法

<!DOCTYPE html> 

<html lang="zh">   

转载请注明:代码家园 » 让IE6和IE7浏览器支持HTML5标签

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)