让更多浏览器支持html5元素的简单方法

当我们试图使用web上的新技术的时候，旧式浏览器总是我们心中不可磨灭的痛！事实上，所有浏览器都有或多或少的问题，现在还没有浏览器能够完整的识别和支持最新的html5结构元素。但是不用担心，你依然可以在最小化不可用造成的影响的基础上使它们跨浏览器工作。之前大前端介绍过这样的方法：HTML5 Shiv – 让该死的IE系列支持HTML5吧。

如果你向一个页面中添加一个浏览器无法识别的元素，默认情况下浏览器会把它当做一个<span>标签对待(ie会当成一个匿名的内联元素处理).这篇文章中提到的html5元素大部分都可以拥有块状元素的表现，因此，让他们在旧式浏览器中正常展现的最简单的方式就是在css中给这些元素设置display:block;

article, section, aside, hgroup, nav, header, footer, figure, figcaption {display: block;}

这样可以解决大部分浏览器的渲染问题，但是有一个浏览器例外.猜猜是哪个浏览器?…是的，是不是很抓狂，对于IE的处理方式需要更巧妙一些，IE拒绝给它不认识的元素赋予样式。针对IE的解决方案看起来毫无逻辑，但是幸亏使用起来很简洁.对于你使用过的html5元素，你只需要在页面的头部插入一段这样的js:

<script>
document.createElement(‘article’);
document.createElement(‘section’);
document.createElement(‘aside’);
document.createElement(‘hgroup’);
document.createElement(‘nav’);
document.createElement(‘header’);
document.createElement(‘footer’);
document.createElement(‘figure’);
document.createElement(‘figcaption’);
</script>

这样IE就可以给这些元素赋予样式了。必须通过js来使css生效虽然看起来很别扭，但是至少我们可以让它们运行起来了。至于为什么可以这样?跟我讨论过的人中没有一个可以回答出来。当你试图在IE中打印一份样式表没有传输完毕的html5文档的时候同样还存在着一个问题。

ie中的打印问题可以用 HTML5 Shiv这个javascript库来解决，它同样是通过添加document.createElement命令来实现的。你可以把它放在一个用于低于IE9版本的IE条件注释中，这样现代浏览器就不需要执行不必要的js了。