html5新增标签的低版本浏览器兼容

最新推荐文章于 2024-07-12 09:41:40 发布

只看五分钟佩奇的小姑姑

最新推荐文章于 2024-07-12 09:41:40 发布

阅读量652

点赞数

文章标签： html5 浏览器标签

本文链接：https://blog.csdn.net/Aloe_904/article/details/78400723

版权

前端的尘封往事专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5标签的兼容</title>
<style type="text/css">
        body{margin: 0}
        header{height: 100px;background: #9f3}
        article{padding: 10px;background: #cf6;overflow: hidden;zoom:1;position: relative;}
        aside{width: 200px;height: 300px;background: #f06;position: absolute;left: 10px;top:10px;}
        section{margin-left: 210px;background: #ddd;height: 300px;}
        footer{height: 100px;background: #de6}
        leo{height: 100px;background:#f03;display: block;}
    </style>
</head>
<body>
<!--    用JS createElement添加元素，也可以引进HTML5shiv.js文件,可以避免低版本浏览器的不兼容
 -->    <header>页面头部</header>
    <article>
        <aside>侧边栏</aside>
        <section>内容区域</section>
    </article>
    <footer>页面的底部</footer>
    <leo>朴树清白之年</leo> <!-- 自定义的标签 -->
</body>
</html>

针对IE浏览器比较好的解决方案是html5shiv。html5shiv主要解决HTML5提出的新的元素不被IE6-8识别
html5shiv的使用非常的简单，考虑到IE9是支持html5的，所以只需要在页面head中添加如下代码即可：
<script type="text/javascript" src="js/html5shiv.js"></script>，