HTML5新标签在IE6/IE7/IE8中的几种兼容方式

HTML5新标签在IE6/IE7/IE8中的几种兼容方式

  • coding javascript

代码块

<script> (function(){ If(!0) Return; var e = “abbr, article, aside, audio, canvas, datalist, dialog, eventsource, figure, footer, header, hgroup, menu, meter, nav, output, progress, section, time, video,”.split(‘, ’) var i= e.length; while (i--){ document.createElement(e[i]) } })() </script>
<![endif]-->

如果是IE9z以下的IE浏览器将创建HTML5标签,这样非IE浏览器就会忽视这段代码,也就不会有无谓的http请求了。

  • 使用Google或百度的html5shiv包(推荐)

代码块

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
**********************************************************************
<!--[if lt IE 9]> <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <![endif]-->(推荐国内用户使用,因为Google在国内不稳定)

但是不管使用哪种方法,首先都要初始化新标签的CSS。因为HTML5默认情况下表现为内联元素,我们需手动将其转为块状元素方便布局

Article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block;}

但是如果IE6/IE7/IE8禁用脚本呢?我们可以参照Facebook的做法,引导用户进入带有noscript标识的”/?_fb_noscript=1”页面,用HTML4标签替换HTML5标签,这要比为了保持兼容性而写大量hack的做法更轻便一些。

<noscript>
     <style>.html5-wrappers{display:none!important;}</style>
     <div class="ie-noscript-warning">您的浏览器禁用了脚本,请<a href="">查看这里</a>来启用脚本!或者<a href="/?noscript=1">继续访问</a>.
     </div>
</noscript>
<![endif]-->
  • 嵌套标签

在语义化的HTML5标签内嵌套div等可用标签,然后只给div写样式。

代码块

<style> body > * .section { color: red; } </style> 
<![endif]--> 
<style> section .section { color: red; } </style> 
<section><div class="section">内容</div></section>
  • IE条件注释
<!--[if lt IE 9]><div class="section"><![endif]--> 
<!--[if IE 9]><section class="section"><![endif]--> 
<!--[if !IE]><!--><section class="section"><!--<![endif]--> 
...... 
<!--[if lt IE 9]></div><![endif]--> 
<!--[if IE 9]></section><![endif]--> 
<!--[if !IE]><!--></section><!--<![endif]-->
  • 使用xmlns定义文档命名空间

原有命名空间:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

HTML5以后被简化的命名空间:

<html lang="en">

你可能感兴趣的:(html5)