经过上一节学习，我们已经建立一个结构良好的页面，如果在旧版的 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）—— 浏览器对语义元素的支持情况的更多相关文章

  1. 努力学习 HTML5 （2）—— 元素的增和删

    HTML5 放松了某些规则,HTML5 的制定者想让这门语言更紧密地反映浏览器的现实. 放松的规则 不要求包含 <html>.<head> 和 <body> 元素. ...

  2. HTML5学习笔记（四）语义元素

    语义元素能够清楚的描述其意义给浏览器和开发者. 无语义 元素实例: <div> 和 <span> - 无需考虑内容. 语义元素实例: <form>, <tab ...

  3. 努力学习 HTML5 （3）—— 改造传统的 HTML 页面

    要了解和熟悉 HTML5 中的新的语义元素,最好的方式就是拿一经典的 HTML 文档作例子,然后把 HTML5 的一些新鲜营养充实进入.如下就是我们要改造的页面,该页面很简单,只包含一篇文章. Apo ...

  4. 努力学习 HTML5 （1）—— 初体验

    HTML5 代表未来:W3C ( World Wide Web Consortium, 万维网联盟) 已经放弃 XHTML,从而使 HTML5 成为正式标准并得到认可. 最简单的 HTML5 文档 & ...

  5. JavaScript快速检测浏览器对CSS3特性的支持情况

    项目中使用动画效果在IE9下不支持,所以写了个判断浏览器是否支持动画的函数,进而扩展到下面判断浏览器支持任一特定CSS3属性的函数. function supportAnimation(){ var ...

  6. HTML5学习笔记（二）：用于构建页面的语义元素

    1.语义元素 大多数HTML5语义元素的用途是标识页面中的一个内容区块,为标注的内容赋予额外的含义,不真正做任何事. 2.使用语义元素的原因 容易修改和维护: 无障碍性(现代Web设计的一个重要主题) ...

  7. HTML5网页如何让所有的浏览器都能识别语义元素标签样式

    浏览器对语义元素的支持情况 如今HTML5愈来愈引发大家的关注了,但目前支持HTML5的浏览器还不是主流,特别是国内用户近50%以上仍旧使用IE6,由于支持HTML5的IE9不支持Xp系统安装,这样未 ...

  8. HTML5 语义元素、迁移、样式指南和代码约定

    语义元素是拥有语义的元素. 什么是语义元素? 语义元素清楚地向浏览器和开发者描述其意义. 非语义元素的例子:<div> 和 <span> - 无法提供关于其内容的信息. 语义元 ...

  9. HTML5 语义元素

    返回目录 http://hovertree.com/h/bjaf/html5zixueji.htm 一个语义元素能够清楚的描述其意义给浏览器和开发者.无语义 元素实例: <div> 和 & ...

随机推荐

  1. VS快捷键设置

    设置VS快捷键,这里以关闭当前窗口为例子: 步骤: 1.tool=>option=>environment=>keyboard 2.百度关闭当前窗口的command是什么,百度出来是 ...

  2. 【转】详解Python的装饰器

    原文链接:http://python.jobbole.com/86717/ Python中的装饰器是你进入Python大门的一道坎,不管你跨不跨过去它都在那里. 为什么需要装饰器 我们假设你的程序实现 ...

  3. UIView.FRAMEWORK

    uiview .framework 有太多 属性到现在基本上没怎么接触,今天开始用到了就纪录一下,有空在去了解了: [self.view bringToFront:btn] 把btn 放到self.v ...

  4. jQuery中.attr()和.prop()的区别

    之前学习jQuery的时候,学习到了两种取得标签的属性值的方法:一种是elemJobj.attr(),另一种是elemJobj.prop().而在学习JS的时候,只有一种方法elemObj.getAt ...

  5. sublime构建执行go程序真爽

    1.安装gosublime插件 2.直接在sublime下调试运行共程序,不用去cmd了: 选择编译系统,编译,出现下面的模拟命令行,直接执行go的命令即可,比如go run process.go,结 ...

  6. 有关big.LITTLE，你需要知道的十件事情

    来源 问题 1:该技术能够同时打开所有核心吗?   在早期的 big.LITTLE 软件模型中(集群迁移和 CPU 迁移),软件在核心之间切换,不能同时打开所有核心.在更新的软件模型“全局任务调度”中 ...

  7. 高效快捷解决一个TextView显示多种字体的控件SpannableTextView

    这个控件本人强烈推荐,它会使得布局非常的简单且高效: 下面这个布局如果是你,你会用多少层?多少控件生成? 告诉你吧,一个SpannableTextView控件就搞定了! 它把TextView和Span ...

  8. eclipse里面构建maven项目详解(转载)

    本文来源于:http://my.oschina.net/u/1540325/blog/548530 eclipse里面构建maven项目详解 1       环境安装及分配 Maven是基于项目对象模 ...

  9. .Net中的Debug模式和Release模式

    1.Debug模式和Release模式 在vs中,运行程序有两种模式:Debug和Release 在bin目录下也会生成对应的文件夹,用于存放生成的dll等文件,这两种模式的区别如下: Debug:用 ...

  10. 拉格朗日乘子法和KKT条件

    拉格朗日乘子法(Lagrange Multiplier)和KKT(Karush-Kuhn-Tucker)条件是求解约束优化问题的重要方法,在有等式约束时使用拉格朗日乘子法,在有不等约束时使用KKT条件 ...