文章目录

  • HTML5的浏览器支持
  • 如何把HTML5定义为块元素
  • 如何在HTML里添加新的元素
  • 关于Internet Explorer 浏览器棘手的问题
  • Shiv解决方案


HTML5的浏览器支持

目前市面上的大部分浏览器都支持HTML5。不过无论是早期的浏览器版本，亦或者是最新的浏览器版本，由于浏览器有着对无法识别的元素会作为内联元素自动处理的特性，我们可以让浏览器自己“学会”去处理“未知”的HTML元素。
还请注意：即使是古早的IE6浏览器也能够通过一些方式来处理这些未知的HTML元素。

如何把HTML5定义为块元素

HTML5定义了8个全新的HTML语义元素（Semantic elements）。其中所有的这些元素均为块级元素。
为了确保古早版本的浏览器能够正确无误地显示这些块级元素，我们可以把css的display属性设置为block，如下所示：

header, section, footer, aside, nav, main, article, figure {
    display: block; 
}

如何在HTML里添加新的元素

我们可以在浏览器trick中向HTML里添加新的元素，下面我们可以通过一个例子展示如何添加新的元素，且为该元素定义样式，元素名我们这里命名为< myHero >:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>为 HTML 添加新元素</title>
<script>
document.createElement("myHero")
</script>
<style>
myHero {
    display: block;
    background-color: #ddd;
    padding: 50px;
    font-size: 30px;
}
</style> 
</head>
 
<body>
 
<h1>标题</h1>
 
<p>段落。</p>
 
<myHero>新的元素</myHero>
 
</body>
</html>

其中JavaScript语句document.createElement(“myHero”) 是为了IE浏览器添加的新的元素；注意该语句仅限于IE。

关于Internet Explorer 浏览器棘手的问题

虽然上述的方法可以用于IE浏览器HTML5元素的添加且适用于所有新的元素，但是令人头痛的是：Internet Explorer 8 以及在此之前的IE浏览器不能够通过以上的方式添加。但是，我们依旧可以使用一些方式来实现需求；我们能够使用Sjoerd Visscher搭建的"HTML5 Enabling JavaScript"与"shiv"来解决我们遇到的麻烦：

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

以上这段注释代码，其功能是在IE浏览器版本低于IE9的时候，读取并解析html5.js这个文件。
由于Google资源库在国内不是很稳定，这里将贴上菜鸟教程的静态资源库：

<!--[if lt IE 9]>
  <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

Shiv解决方案

对于IE浏览器来说，htmlsniv是个不错的问题解决方案，它主要功能是解决了html5新元素无法被IE6-8识别，这些新元素不能作为父节点包裹住子元素，也无法应用css样式等问题。
下面是代码实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>渲染 HTML5</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
 
<body>
 
<h1>我的第一篇文章</h1>
 
<article>
	中亿丰数字科技，其使命很简单 – 协助建筑，工程，施工，业主/运营商（AECO）和GIS公司克服实施和利用设计，施工和地理空间技术的挑战。
中亿丰数字科技将BIM实施目标划为“提升公司形象”、“解决技术问题”、“项目全生命周期应用”三个阶段，并且确立了以BIM技术提升精细化管理，促进发展的战略思路。通过在大量工程建设项目中的BIM实践应用，我们目前已经将BIM应用贯穿于项目前期策划、方案、设计、投标、施工、运维等阶段的多个生命周期。从基础建模、模型数据分析、绿色建筑规划到深化设计、4D施工模拟、方案论证、专业施工方案和项目运维等多个领域都取得了显著的成果。
</article>
 
</body>
</html>

sniv的引用必须在< head >元素中，因为IE浏览器在解析新元素的时候需要加载该文件来“认识”所有的新元素。