Sjoerd Visscher 发现了一个简洁的 方法 让样式在 IE 中作用到未知的元素上——仅需 JS 创建此未知元素即可:

document.createElement(elementName)

同理(对于 IE 来说 HTML5 元素即是未知元素),该方法也可顺延到 HTML5 的元素上(详细见:John Resig 写的 《HTML5 Shiv》 一文):

<html>
<head>
<style>section { color: red; }</style>
<script>document.createElement("section")</script>
</head>
<body>
<section>Hello World!</section>
</body>
</html>

在 IE 中,为了更方便使用 HTML5 元素,我们可以引入这样的脚本:

(function(){ 
    // from: http://dean.edwards.name/weblog/2007/03/sniff/
    if(!/*@cc_on!@*/0) return; 
       
    var html5 = "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(',');    
    for(var i = 0, len = html5.length; i < len; i++ ) {        
        document.createElement(html5[i]);
    }
})();

详细具体应用的案例如下:



共有29 条评论

  1. 1. 头像 vapour

    学习了。很独特的构思,为什么我想不到呢。

  2. 2. 头像 RainoXu

    HTML5路漫漫,我们只能静静地等待它吧。。。

  3. 3. 头像 爱月

    一下子接受不了,慢慢看吧。。。

  4. 4. 头像 笨乌不飞

    HTML 5 在成为正式标准之前最好不用。

  5. 5. 头像 Betty

    这样只是使元素能够呈现css样式吧,不能使那些元素真正的发挥作用…

  6. 6. 头像 天堂左我往右

    重量级的html5元素都没得用…

  7. 7. 头像 max

    这个方法Apple.com早就用上了!

  8. 8. 头像 布里斯班

    ie6能用么

  9. 9. 头像 怿飞

    @布里斯班 IE6可以用的,测试一下就知道了,呵呵

  10. 10. 头像 cc

    好像现在还没什么用
    不过思路挺好

  11. 11. 头像 chris.jie

    不知道怿飞看到过ie下用canvas 这个元素没?

    有个日本人开发了JS 专门可以让IE支持这个元素 很酷的

    你可以去查查

  12. 12. 头像 小林子里

    你们大家难道都没有发现上面提供的脚本有个低级的错误!?没发现多了个符号么?…

  13. 13. 头像 Insen

    @小林子里 for少了一个左括号…你眼真细呢!

  14. 14. 網站製作學習誌 » [Web] 連結分享

    […] 如何在 IE 中使用 HTML5 元素 […]

  15. 15. 头像 非常完美

    现在很少用IE了…

  16. 16. 头像 普通话

    不知道IE最终的命运会是怎样

  17. 17. 头像 游戏攻略

    同意4楼的观点,新技术没有成型前最好别用,当然尝鲜的除外·

  18. 18. 头像 fisher

    默然回首,才发现,已经有html5了?

  19. 19. 头像 ONEBOYS

    我有一种使用html5的冲动了,
    可以用来增加使用那些结构性元素——语义化,省下很多div。

  20. 20. 头像 华晨

    还在使用xhtml2,等html5普及了再用吧

  21. 21. 向html5进军,呵呵 - 小V的天空-网站建设-网页设计-seo-模板下载

    […] 如何在 IE 中使用 HTML5 元素 http://www.planabc.net/2009/06/13/how_to_use_html5_elements_in_ie/ Preparing for HTML5 with Semantic Class […]

  22. 22. 头像 Insion

    用html 5可以躲避xml parsing error,是个好东西~回去就把我的wp进化到html 5!

  23. 23. 头像 优质商城

    html 5对FLASH有威胁了,什么时候浏览器都支持呢。

  24. 24. 穿過雲層оО Rudy | HTML5学习资源整理

    […] 如何在 IE 中使用 HTML5 元素 http://www.planabc.net/2009/06/13/how_to_use_html5_elements_in_ie/ Preparing for HTML5 with Semantic Class Names […]

  25. 25. dovapour的blog » 让IE支持HTML5元素作为CSS选择器

    […] 如何在 IE 中使用 HTML5 元素 […]

  26. 26. 头像 time

    很好使的js,然后再重置一下样式,有些元素转块级,就能正常使用了!

  27. 27. 头像 gafish

    可以学习,可以尝试,但主页面上切记小心 。

  28. 28. 头像 Cson

    但是IE6 7下 HTML5元素标签默认有的padding等样式就不能获取到了吧?

  29. 29. 头像 zendwang

    为什么我想不到。。。。

发表评论

(必填)

(必填,会为您保密)

评论仅支持“a、abbr、strong、em、blockquote、code”几个简单的标签