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]-->
**********************************************************************
(推荐国内用户使用,因为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条件注释

 
 
<section class="section"> 
...... 
 
 
section>
  • 使用xmlns定义文档命名空间

原有命名空间:

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

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

<html lang="en">

你可能感兴趣的:(html5兼容性处理)