努力学习 HTML5 (4)—— 浏览器对语义元素的支持情况
2015-09-21 01:21
501 查看
经过上一节学习,我们已经建立一个结构良好的页面,如果在旧版的 IE 浏览器中浏览可能这些语义元素无法显示。
毕竟这些语义元素什么也不做,要支持它们,只要让浏览器把它们当做普通的 <div> 元素就行了。为此我们要做的就是为它们添加点样式规则。之后就可以得到超级可靠的语义元素了,即使使用10年前的浏览器也可以正常浏览。
因此我们添加一条超级规则,为9个 HTML5 元素应用块级显示格式的规则:
好在,有一个变通方案,通过 JavaScript 创建元素,就可以骗过 IE,让它识别外来元素,例如下面的代码:
实际上,已经有现成的脚本,来解决这个问题了,只需要浏览器处理页面其余部分之前运行。
为了避免不必要地加载 JavaScript 脚本,可以像下面这样把引用脚本放在 IE 条件注释中:
上面这段代码仅会在 IE 浏览器下运行,还有一点需要注意,在页面中调用 html5shiv.js 文件必须添加在页面的 <head> 元素内,因为 IE 浏览器必须在元素解析前知道这个元素,所以这个 js 文件不能在页面底部调用。
html5shiv.js 文件可以从 https://github.com/aFarkas/html5shiv/blob/master/src/html5shiv.js 下载查看,你可以把html5shiv的js文件直接下载下来让后上传到自己的服务器单独调用。
可能GitHub打开速度有些慢,下面给出 html5shiv.js 的本地下载链接: html5shiv.rar
毕竟这些语义元素什么也不做,要支持它们,只要让浏览器把它们当做普通的 <div> 元素就行了。为此我们要做的就是为它们添加点样式规则。之后就可以得到超级可靠的语义元素了,即使使用10年前的浏览器也可以正常浏览。
为语义元素添加样式
浏览器遇到不认识的元素时,会把它们当做内联(inline)元素。大多数 HTML5 语义元素都是块级元素。因此我们添加一条超级规则,为9个 HTML5 元素应用块级显示格式的规则:
article, aside, figure, figcaption, footer, header, main, nav, section, summary{ display: block; }
让IE浏览器支持HTML5标准
对于较早版本的 IE 来说,上面的技术还存在问题,它们会拒绝给无法识别的元素添加样式。好在,有一个变通方案,通过 JavaScript 创建元素,就可以骗过 IE,让它识别外来元素,例如下面的代码:
document.createElement('header');
实际上,已经有现成的脚本,来解决这个问题了,只需要浏览器处理页面其余部分之前运行。
为了避免不必要地加载 JavaScript 脚本,可以像下面这样把引用脚本放在 IE 条件注释中:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <!-- saved from url=(0014)about:internet --> <title>Apocalypse Now</title> <!-- Patch to make semantic elements work in IE8 and below. --> <!--[if lt IE 9]> <script src="html5shiv.js"></script> <![endif]--> <link rel="stylesheet" href="ApocalypsePage_Revised.css"> </head>
上面这段代码仅会在 IE 浏览器下运行,还有一点需要注意,在页面中调用 html5shiv.js 文件必须添加在页面的 <head> 元素内,因为 IE 浏览器必须在元素解析前知道这个元素,所以这个 js 文件不能在页面底部调用。
html5shiv.js 文件可以从 https://github.com/aFarkas/html5shiv/blob/master/src/html5shiv.js 下载查看,你可以把html5shiv的js文件直接下载下来让后上传到自己的服务器单独调用。
可能GitHub打开速度有些慢,下面给出 html5shiv.js 的本地下载链接: html5shiv.rar
相关文章推荐
- 努力学习 HTML5 (3)—— 改造传统的 HTML 页面
- 源生代码(native)和H5的交互
- html5 API
- html5
- HTML5扩展之微数据与丰富网页摘要
- WIX:html5拖拽式建站,个人建站首选,操作方便快捷
- 以圆桌骑士为例浅尝HTML5游戏开发
- HTML5 2D 游戏开发(三): 设置舞台
- HTML5 中 div section article 的区别
- a web-based music player(GO + html5)
- HTML5游戏开发学习笔记1
- 初学HTML5系列三:事件
- 努力学习 HTML5 (2)—— 元素的增和删
- 采用 HTML5 File API 达到client log
- html5 七巧板
- HTML5 应用缓存使用心得
- 努力学习 HTML5 (1)—— 初体验
- html5学习canvas
- HTML5学习之工具使用
- HTML5拖放代码