IE8以下浏览器兼容HTML5标签

Go to comments

IE8以下浏览器兼容HTML5标签

常见的html5标签header,section,footer,IE8以下浏览器不支持不识别这些标签的解决方案

1. 为网站创建多套模板，通过程序对User-Agent的判断给不同的浏览器用户显示不同的页面，比如优酷网就是采用的这种模式（缺点：工程量大）。

2. 使用javascript来使不支持HTML5的浏览器支持html标签，是大部分网站采用的方式。

我们需要调用两个js文件

html5shiv.js 支持html5标签

respond.min.js 支持媒体查询

在head头部添加如下代码即可，意思是IE9以下低版本IE自动加载这两个js文件

<!--[if lte ie 8]>
  <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
  <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->

纸上得来终觉浅，绝知此事要躬行

例子

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">

<!--[if lte ie 8]>
  <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
  <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->

<style type="text/css">
  header,section,footer{
    width:400px;
    height:400px;
    background:yellow;
    margin:0 auto;
    margin-bottom:10px;
    /* behavior:url(ie-css3.htc);*/
  }
</style>
</head>
<body>

  <header>header</header>
  <section>section</section>
  <footer>footer</footer>

</body>
</html>

原生js在低版本IE下创建HTML5标签

常见的 html5 标签 header, section, footer，IE8以下浏览器不支持不识别这些标签的，通过js动态的创建这些名字的标签，因为默认是不识别不支持，这些标签理解是自定义标签，自定义标签默认是内联元素，内联元素是不支持宽高的

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页兼容性</title>
<script>

  // document文档的意思在文档当中动态创建
  document.createElement("header");
  document.createElement("section");
  document.createElement("footer");

</script>
<style>
  header{
    height:200px;
    width:200px;
    background:red;
    display:block;
  }
  section{
    height:150px;
    width:150px;
    background:yellow;
    display:block;
  }
  footer{
    height:100px;
    width:100px;
    background:blue;
    display:block;
  }
</style>
</head>
<body>

  <header>header</header>
  <section>section</section>
  <footer>footer</footer>

</body>
</html>

引入成熟的 html5shiv.js 库文件即可

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->
<style>
  header{
    width:200px;
    height:200px;
    background:red;
  }
  section{
    width:150px;
    height:150px;
    background:yellow;
  }
  footer{
    width:100px;
    height:100px;
    background:blue;
  }
</style>
</head>
<body>
  <header>header</header>
  <section>section</section>
  <footer>footer</footer>
</body>
</html>

IE8以下浏览器兼容HTML5标签

Leave a Reply