HTML5浏览器支持及兼容性处理

HTML5与新元素

最新推荐文章于 2021-06-23 17:21:41 发布

原创最新推荐文章于 2021-06-23 17:21:41 发布 · 263 阅读

0 ·

CC 4.0 BY-SA版权

HTML 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了HTML5在现代浏览器中的支持情况，解释了如何确保旧版浏览器正确显示新语义元素，展示了如何通过JavaScript和CSS添加及样式化自定义HTML元素，并提供了针对IE8及以下版本的完美Shiv解决方案。

1、现代的浏览器都支持HTML5。

2、所有浏览器不管是新的还是旧的对无法识别的元素会作为内联元素自动处理。

3、HTML5定义了8个HTML语义元素，所有这些元素都是块级元素，为了能让旧版本的浏览器正确显示这些元素，你可以设置css的display属性值为block，如下：

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

4、你可以向HTML添加新元素，如下：

复制代码

<!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>
    <myHero>我的第一个新元素</myHero>
</body>
</html>

复制代码

JavaScript语句document.createElement("myHero")是为ie浏览器添加新的元素，但是ie8及更早版本不支持以上方式，我们可以使用以下方式来解决该为题：

复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>渲染 HTML5</title>
<!--[if lt IE 9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
    <article>
   　　我的第一个新元素
    </article>
</body>
</html>

复制代码

以上就是完美的Shiv解决方案。