HTML5 浏览器支持


你可以让一些较早的浏览器(不支持HTML5)支持 HTML5


HTML5浏览器支持

所有现代浏览器都支持HTML5

此外,所有浏览器,包括旧的和最新的,对无法识别的元素会作为内联元素自动处理

正因为如此,你可以 "教会" 浏览器处理 "未知" 的 HTML 元素

甚至你可以教会 IE6 (Windows XP 2001) 浏览器处理未知的 HTML 元素


将HTML5 语义元素定义为块元素

HTML5定义了8个新的语义元素。所有这些都是块级元素。

为了能让旧版本的浏览器正确显示这些元素,你可以设置 CSS 的 display 属性值为 block

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

将新元素添加到HTML

您还可以使用浏览器技巧将新元素添加到HTML页面。

此示例将一个名为<myHero>的新元素添加到HTML页面,并为其定义样式:

实例

<!DOCTYPE html>
<html>
<head>
<script>document.createElement("myHero")</script>
<style>
myHero {
    display: block;
    background-color: #dddddd;
    padding: 50px;
    font-size: 30px;
}
</style>
</head>
<body>

<h1>一个标题</h1>
<myHero>我的第一个新元素</myHero>

</body>
</html>
运行 »

在IE 9及更早版本中创建新元素需要JavaScript语句document.createElement("myHero")



Internet Explorer 8 问题

您可以将上述解决方案用于所有新的HTML5元素。

但是, IE8(及更早版本)不允许使用未知元素的样式!

谢天谢地,Sjoerd Visscher创建了HTML5Shiv! HTML5 Shiv是一种JavaScript解决方法,可以在版本9之前的Internet Explorer版本中启用HTML5元素的样式。

您将需要HTML5shiv为早于IE 9的IE浏览器提供兼容性。


HTML5Shiv 语法

HTML5Shiv位于<head>标记内。

HTML5Shiv是一个在<script>标记中引用的javascript文件。

当您使用新的HTML5元素时,您应该使用HTML5Shiv: <article><section><aside><nav><footer>

您可以从 github下载最新版本的HTML5shiv 或参考CDN版本, 网址为 www.bootcdn.cn/html5shiv

句法

<head>
  <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
  <![endif]-->
</head>

HTML5Shiv示例

如果您不想在网站上下载和存储HTML5Shiv,则可以参考CDN网站上的版本。

在任何样式表之后,HTML5Shiv脚本必须放在<head>元素中:

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--[if lt IE 9]>
  <script src="https://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>

<section>

<h1>城市</h1>

<article>
<h2>伦敦</h2>
<p>伦敦是英格兰的首都。 它是英国人口最多的城市,拥有超过1300万居民的大都市区.</p>
</article>

<article>
<h2>巴黎</h2>
<p>巴黎是法国首都和人口最多的城市.</p>
</article>

</section>

</body>
</html>
运行 »