怎么让网页支持html5,让更多浏览器支持html5元素的简单方法

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

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

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

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

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’);

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

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

源:http://dev.opera.com/articles/view/new-structural-elements-in-html5/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值