你可以学会如何使用旧的浏览器正确处理新的HTML5.


HTML5 浏览器支持

HTML5 支持所有现代浏览器.

此外,所有的浏览器,旧的和新的,自动处理未被识别的元素作为内联元素.

因为这样,你可以“告诉”的旧的浏览器来处理“未知”的HTML元素.

定义语义元素作为块元素

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

在旧浏览器中确保正确的行为,你可设置元素的 display属性为block:

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

加入新的元素到HTML

你也能添加新的元素到HTML页面.

这个实例添加一个新的元素叫做 <myHero> 到HTML页面, 并且定义了一个样式:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>享学课堂</title>
<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>

让我试试

JavaScript 语句 document.createElement("myHero") 需要创建在IE 9或更早的版本中.

使用IE8的问题

你可以使用上面描述的解决方案为所有新的HTML5元素.

然而, IE8 (和更早的版本) 不允许未知元素的样式!

幸运的是, Sjoerd Visscher 创建了 HTML5Shiv! HTML5Shiv 是一个JavaScript类库,可以使IE9或者更早的版本识别新的HTML5元素。

HTML5Shiv 语法

HTML5Shiv 被放在<head> 标签里面.

HTML5Shiv 是一个javascript文件,通过<script>标签引用.

当你使用新的HTML5元素,例如: <article>, <section>, <aside>, <nav>, <footer>时,你可以使用HTML5Shiv来兼容旧的IE浏览器。

你可以从github下载最新的HTML5shiv版本或者使用CDN https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js

语法

<head>
<!--[if lt IE 9]>
<script src="/js/html5shiv.js"></script>
<![endif]-->
</head>

HTML5Shiv 实例

如果你不想下载和存储html5shiv在您的网站上,你可以参考在CDN网站的版本.

HTML5Shiv 脚本必须放在<head>元素里面, 样式如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
<title>享学课堂</title>
</head>
<body> <section> <h1>著名城市</h1> <article>
<h2>伦敦</h2>
<p>伦敦是英国的首都。它是英国人口最多的城市,拥有超过1300万居民的大都市.</p>
</article> <article>
<h2>巴黎</h2>
<p>巴黎是法国首都和人口最多的城市.</p>
</article> <article>
<h2>东京</h2>
<p>东京是日本的首都,东京大区的中心,也是世界上人口最多的大都市区.</p>
</article> </section> </body>
</html>

让我试试


本文转自:http://codingdict.com/article/1450

05-27 07:37