文章目录
  1. 1. 自己coding JS
  2. 2. google的html5.js文件
  3. 3. 通配符
  4. 4. IE条件注释
  5. 5. 命名空间

网页编程中,感觉最恶心的就是兼容性问题,尤其是IE浏览器,更是让人无语。如今使用HTML5的web应用越来越多,大部分浏览器也都在不透程度上支持HTML5,但是IE浏览器中IE9以下的版本都不支持HTML5,尤其是IE6,今天就简单介绍一下几种解决这个问题的方法。

低版本IE不能识别HTML5的原因是无法识别HTML5中一些新标签,所以我们的解决方案也从这个原因突破。

自己coding JS

<!--[if lt IE9]> 
<script> 
    (function(){
                var element=['header','footer','article','aside','section','nav','menu','hgroup','details','dialog','figure','figcaption'],
                    len=element.length;
                while(len--){
                    document.createElement(element[i])
                }
     })();
</script>
<![endif]-->

上面只是简单创建了几个典型的HTML5标签,让它们在IE6/7/8中可以成为标签。

其实这个已经有人做了完整的JS文件,就是下面介绍的第二种方法。

google的html5.js文件

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

或者:

<!--[if lt ie 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 

这两个实际上是一样的,其中的JS代码如下:

(function(){
    if(!/*@cc_on!@*/0)
        return;
    var e = "abbr,article,aside,audio,canvas,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])
    }
})()

但是如果ie6/7/8 禁用脚本的用户,那么就变成了无样式的”白板”网页,应该如何解决呢?我们可以参考facebook的做法,即引导用户进入带有noscript标识的 “/?_fb_noscript=1”页面,用 html4 标签替换 html5 标签:

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

上面两种JS的做法,无论哪一种,我们都需要在CSS文件中进行如下定义,目的是让这些标签成为块状元素,just like div。

/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

当然,我们也可以使用非JS的手段解决这个问题。

通配符

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

<script>
<!--[if lt IE 9]>
<style>
body > * .section {
    color: #ff0;
}
</style>
<![endif]-->
<style>
section .section {    color: #f00;
}
</style>
<section><div class="section">内容测试...</div></section>

但是这种写法其实可以直接给一个有语义的id或者class。

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]-->

大量的html代码使原本想语义化的代码更加混乱不堪。而且要对样式的书写也不利。

命名空间

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:html5="http://www.w3.org/html5/">
<body>
 <html5:section>
 <!-- content -->
 </html5:section>
</body>
</html>

这个方法很明显有个缺陷:你必须在HTML文档中使用XML格式的命名空间,同样,你也需要在css中这么做:

html5\:section {
 display: block;
}
文章目录
  1. 1. 自己coding JS
  2. 2. google的html5.js文件
  3. 3. 通配符
  4. 4. IE条件注释
  5. 5. 命名空间