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

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解决方案。

 

posted @ 2019-01-29 10:44  枫鸟~  阅读(5277)  评论(0)  编辑  收藏  举报