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;}
1
2
但是如果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”>
1
HTML5以后被简化的命名空间:

<html lang=”en”>
大家有需要租用佛山高防服务器的可以找我

发表评论

电子邮件地址不会被公开。 必填项已用*标注