解决IE兼容H5的问题

Html5提供的一些新多媒体标签（header,article,aside,section,nav,figure,menu,footer）使用起来非常的方便，但是低版本的IE浏览器（IE6/IE7/IE8）对的这些新标签根本识别不了，解决这些问题要了解是浏览器无法识别这些标签，想办法让浏览器识别这些标签就可以了。有两种方案，自定义标签或者引入第三方兼容文件就可以了。

1.通过自定义标签解决

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>*****</title>
</head>
<style>
    nav{
          height:200px;
          background:#f00;
          display:black; //设置为块级元素
}
</style>

<script>
  //通过创建一个标签来实现
    document.createElement('nav');
</script>

<body>
    <nav>这是一段文字</nav>
</body>
</html>

2.引入兼容文件JS

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>*****</title>
    [ if Ite IE8]
    <script src="../html5/libs/html5shiv.min.js"></script>
    [end if]
</head>
<style>
    nav{
         height:200px;
         background:#f00;
}
</style>
<body>
    <nav>这是一段文字</nav>
</body>
</html>

 

posted @ 2020-11-17 11:34  隔壁老于头  阅读(326)  评论(0)  编辑  收藏  举报