本节书摘来异步社区《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](https://i-blog.csdnimg.cn/blog_migrate/763a11989cbd20dd4bb1743d2f7b44af.png)
2.现在新建另一个文件命名为ch01e4.html,引入Modernizr,如图1-5所示。
![65edfeeb8195dccaa1464d319b5fbb1e0d84a838](https://i-blog.csdnimg.cn/blog_migrate/6ee87e129868e74f2125136916d5606b.png)
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](https://i-blog.csdnimg.cn/blog_migrate/9f9f06ea9cb0370b01ac29ae5536f6c8.png)
使HTML5元素在旧版本IE中变为块级元素:
下面的代码可以使HTML5元素变为块级元素,但注意不是所有的HTML5元素都需要显示为块级元素。
下面是HTML5中的块级元素:
![458caf6f79dbe29b3f5834366a3d5abbf94ae20d](https://i-blog.csdnimg.cn/blog_migrate/7e941f891046bdfa7c1c46d643a36e68.png)
Modernizr
Modernizr不仅使HTML5元素可以被设置样式,它还可以检测HTML5各个功能在不同浏览器中的兼容性。你可以在2.0版本中自定义下载内容:http://www.modernizr.com/download/
。