随着HTML5日渐流行,很多时候我们会在页面中使用HTML5元素,然而悲催的是,IE的大部分版本对这些HTML5元素表现出来的是不知所措的视而不见——低于IE9的版本,让我们辛苦布局好的页面在这些IE版本下显得是浆糊一桶。为了让这不同的IE版本之间能"认识"HTML5元素,开源的html5shiv出现了!
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