努力学习 HTML5 （4）—— 浏览器对语义元素的支持情况
经过上一节学习，我们已经建立一个结构良好的页面，如果在旧版的 IE 浏览器中浏览可能这些语义元素无法显示。
毕竟这些语义元素什么也不做，要支持它们，只要让浏览器把它们当做普通的 <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 （4）—— 浏览器对语义元素的支持情况的更多相关文章
- 努力学习 HTML5 （2）—— 元素的增和删
HTML5 放松了某些规则,HTML5 的制定者想让这门语言更紧密地反映浏览器的现实. 放松的规则 不要求包含 <html>.<head> 和 <body> 元素. ...
- HTML5学习笔记（四）语义元素
语义元素能够清楚的描述其意义给浏览器和开发者. 无语义 元素实例: <div> 和 <span> - 无需考虑内容. 语义元素实例: <form>, <tab ...
- 努力学习 HTML5 （3）—— 改造传统的 HTML 页面
要了解和熟悉 HTML5 中的新的语义元素,最好的方式就是拿一经典的 HTML 文档作例子,然后把 HTML5 的一些新鲜营养充实进入.如下就是我们要改造的页面,该页面很简单,只包含一篇文章. Apo ...
- 努力学习 HTML5 （1）—— 初体验
HTML5 代表未来:W3C ( World Wide Web Consortium, 万维网联盟) 已经放弃 XHTML,从而使 HTML5 成为正式标准并得到认可. 最简单的 HTML5 文档 & ...
- JavaScript快速检测浏览器对CSS3特性的支持情况
项目中使用动画效果在IE9下不支持,所以写了个判断浏览器是否支持动画的函数,进而扩展到下面判断浏览器支持任一特定CSS3属性的函数. function supportAnimation(){ var ...
- HTML5学习笔记（二）：用于构建页面的语义元素
1.语义元素 大多数HTML5语义元素的用途是标识页面中的一个内容区块,为标注的内容赋予额外的含义,不真正做任何事. 2.使用语义元素的原因 容易修改和维护: 无障碍性(现代Web设计的一个重要主题) ...
- HTML5网页如何让所有的浏览器都能识别语义元素标签样式
浏览器对语义元素的支持情况 如今HTML5愈来愈引发大家的关注了,但目前支持HTML5的浏览器还不是主流,特别是国内用户近50%以上仍旧使用IE6,由于支持HTML5的IE9不支持Xp系统安装,这样未 ...
- HTML5 语义元素、迁移、样式指南和代码约定
语义元素是拥有语义的元素. 什么是语义元素? 语义元素清楚地向浏览器和开发者描述其意义. 非语义元素的例子:<div> 和 <span> - 无法提供关于其内容的信息. 语义元 ...
- HTML5 语义元素
返回目录 http://hovertree.com/h/bjaf/html5zixueji.htm 一个语义元素能够清楚的描述其意义给浏览器和开发者.无语义 元素实例: <div> 和 & ...
随机推荐
- PHP开发环境配置
wamp:windows apache MySQL php 下载php版本问题在windows 下apache+php用vc6 thread safe版本 1.首先安装apache到e盘myenv/a ...
- 水果项目第3集-asp.net web api开发入门
app后台开发,可以用asp.net webservice技术. 也有一种重量级一点的叫WCF,也可以用来做app后台开发. 现在可以用asp.net web api来开发app后台. Asp.net ...
- 中国排名前100的IT公司 （转）
排序 单位名称 软件收入 1 华为技术有限公司 622360 2 中兴通讯股份有限公司 601331 3 海信集团有限公司 448641 4 UT斯达康通讯有限公司 386763 5 海尔集团 ...
- Hadoop MapReduce编程创建maven项目时所用到的pom依赖
<dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> & ...
- 在Linux中让打印带颜色的字
echo显示带颜色,需要使用参数-e 格式如下: echo -e "\033[字背景颜色;文字颜色m字符串\033[0m" 例如: echo -e "\033[41;37 ...
- javaBean与Map<String,Object>互转
背景:有时候想不通阿帕奇的BeanUtils是怎么进行map和Bean互相转化的. 工作闲暇之余,自己写个一小段代码,一探究竟,试试才发现,原来一切并非我们想的那么什么和复杂. 注:这里只是简单实例, ...
- java里的分支语句--程序运行流程的分类(顺序结构,分支结构,循环结构)
JAVA里面的程序运行流程分三大类: 1,顺序结构:顺序结构就是依次执行每一行代码 2,分支结构:分支结构就是按不同的条件进行分支 3,循环结构:一段代码依条件进行循环执行. 其中,分支结构有两大类: ...
- link,unlink,remove, rename函数
link函数:创建一个指向现有文件的链接的方法是使用 个人理解为cp命令 #include <unistd.h> int link( const char *existingpath, c ...
- 从DB灌值到DataTable时，字段值为NULL时报错相关信息；
报错信息: 1. 2. 3. 4. 5. 6. 解决方法: 1. Data Layer SQL 语句取数据时,把其列值有为null的字段用0.00替换,(ISNULL的用法): 2. #r ...
- [ASE][Daily Scrum]11.25
View Shilin Liu 修复现有的bug,子弹无法破坏射程内视野外的墙 Yiming Liao 无法看见从视野外到视野内的子弹 Server Songtao He 服务器处理子弹命中t ...