天天看点

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

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

html5移动web开发实战

适用浏览器:所有

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

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

2.在此下载<code>modernizr:http://www.modernizr.com/</code>,它由faruk ateş、paul irish和alex sexton开发。

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

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

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

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

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

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

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

html5shim,由remy sharp、jonathan neal和社区开发,对打印也同样有效。

*innershiv,由joe bartlett开发,支持元素的innerhtml。

html5 css重置

下面的代码可以清除html5元素的默认样式:

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

使html5元素在旧版本ie中变为块级元素:

下面的代码可以使html5元素变为块级元素,但注意不是所有的html5元素都需要显示为块级元素。

下面是html5中的块级元素:

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

modernizr

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

继续阅读