Question

我基本上想要创建一个支持HTML5语义元素的网页，但是对于不注意HTML5元素的浏览器，我该怎么办？

例如，我想使用现代浏览器注意到的<section></section>，但如果有人在较旧的浏览器中访问我的网站，我该怎么做才能显示DIV而不是SECTION？

我曾尝试使用以下代码，这只对Internet Explorer有用，但对其他浏览器有用吗？

<section class="main">
  <!--[if IE]>
  <div  class="main-ie"> Only displayed only in IE .</div>
  <![endif]-->
</section>

有什么建议吗？

Answer 1

HTML5 Shiv支持在旧版Internet Explorer中使用HTML5分区元素，并为Internet Explorer 6-9，Safari 4.x（和iPhone 3.x）以及Firefox 3.x提供基本的HTML5样式。

<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Answer 2

解决此问题的好方法是包含JavaScript polyfill库Modernizr。它使HTML5元素可以在旧版本的IE中使用。这样你就可以开始使用HTML5语义标签，而不是等到旧的IE死掉;）

Answer 3

您可以为IE包含这个小脚本：

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

如果您使用document.createElement，IE会理解新元素和自定义元素。

参考：http://css-tricks.com/snippets/javascript/make-html5-elements-work-in-old-ie/

Answer 4

将此代码放入您的头标记IE浏览器支持HTML5标记

 <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <script src="http://www.toyotapriusprojects.com/wp-content/themes/html5/lib/js/innershiv.min.js"></script>
        <![endif]-->

在IE中显示DIV而不是Section / Article

4 个答案: