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

孤街醉人 提交于 2019-12-25 12:27:31

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

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!