《HTML5移动Web开发实战》—— 1.7 跨浏览器HTML5

本节书摘来异步社区《HTML5移动Web开发实战》一书中的第1章,第1.7节,作者:石川,更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.7 跨浏览器HTML5

HTML5移动Web开发实战
适用浏览器:所有

旧浏览器无法识别HTML5元素,也无法对这些元素设置样式,但有许多工具可以解决这个问题,例如Modernizr。

1.7.1 准备

1.Windows Mobile的自带浏览器无法识别HTML5元素,如果没有Windows Mobile,你可以使用IE7来测试,因为他们都是基于相同的浏览器引擎。

2.在此下载Modernizr:http://www.modernizr.com/,它由Faruk Ateş、Paul Irish和Alex Sexton开发。

1.7.2 实践

1.新建一个HTML文件命名为ch01e3.html,然后输入以下代码:

6ef42bc47d4b5e549dcdf722d7e2dbc0b2468cb9

2.现在新建另一个文件命名为ch01e4.html,引入Modernizr,如图1-5所示。

65edfeeb8195dccaa1464d319b5fbb1e0d84a838
1.7.3 回顾

注意如果要使用Modernizr,你需要在

标签中引入它。下一节还有一些其他的工具与Modernizr类似。
1.7.4 延伸

Modernizr不是唯一可以帮助我们跨浏览器的库,还有其他两个值得注意:

html5shim,由Remy Sharp、Jonathan Neal和社区开发,对打印也同样有效。

http://code.google.com/p/html5shim/

*InnerShiv,由Joe Bartlett开发,支持元素的innerHTML。

http://jdbartlett.github.com/innershiv/

HTML5 CSS重置
下面的代码可以清除HTML5元素的默认样式:

b10d67138cc1c731c2c3aebf71478b565325413c

使HTML5元素在旧版本IE中变为块级元素:
下面的代码可以使HTML5元素变为块级元素,但注意不是所有的HTML5元素都需要显示为块级元素。

下面是HTML5中的块级元素:

458caf6f79dbe29b3f5834366a3d5abbf94ae20d

Modernizr
Modernizr不仅使HTML5元素可以被设置样式,它还可以检测HTML5各个功能在不同浏览器中的兼容性。你可以在2.0版本中自定义下载内容:http://www.modernizr.com/download/

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值