html5shiv,让IE9以下的IE支持HTML5元素

  随着日渐流行,很多时候我们会在页面中使用HTML5元素,然而悲催的是,IE的大部分版本对这些HTML5元素表现出来的是不知所措的视而不见——低于IE9的版本,让我们辛苦布局好的页面在这些IE版本下显得是浆糊一桶。为了让这不同的IE版本之间能"认识"HTML5元素,开源的出现了!
  html5shiv的最大特点是让那些个不认HTML5的IE浏览器承认HTML5元素,并按照最基本的处理方式处理HTML5元素——块化(display:block)。当然,如果你使用的IE版本是考古出来的,而且比IE6还要古老,那么建议你还是放弃对html5和html5shiv的尝试。

  html5shiv的使用方法非常简单,默认只需要将html5shiv按下面方式放在页面的head内即可。

<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->

  html5shiv的原理是使用createElement方法,这包含document.createElement和document.createDocumentFragment,对当前页面的HTML5元素进行动态的调整,并且为这些元素提供最基本的样式,其源代码如下:

/***省略**/
    if (html5.shivCSS && !supportsHtml5Styles && !data.hasCSS) {
      data.hasCSS = !!addStyleSheet(ownerDocument,
        // corrects block display not defined in IE6/7/8/9
        'article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}' +
        // adds styling not present in IE6/7/8/9
        'mark{background:#FF0;color:#000}'
      );
    }
/***省略**/

   在大多数情况下,我们直接向上面那样使用就可以完成对HTML5的支持,但如果要进一步处理,同样没有问题,html5shiv提供API的支持,更多的信息可以参见:html5-shiv-API

  官方的建议是:1,使用min版本的js(压缩过的)以节省带宽和提高加载速度;2,必须在body元素之前加载;3,可以在页面的CSS之前或者之后加载,但从性能性能上出发,CSS先于html5shiv加载会更优。

 

参考地址:

html5shiv Google上的网址:https://code.google.com/p/html5shiv/

html5shiv在GitHub上的地址:https://github.com/aFarkas/html5shiv

Friday, April 26, 2013 | 其他技术 HTML&HTML5 Javascript(s)

文章评论

No comments posted yet.

发表评论

Please add 2 and 6 and type the answer here:

关于博主

  一枚成分复杂的网络IT分子,属于互联网行业分类中的杂牌军。