如何让IE8及以下版本浏览器支持HTML5新的定义元素？

古城微笑少年丶 2022-01-29 03:37 474阅读 0赞

如何让IE8及以下版本浏览器支持HTML5新的定义元素？

1：我们都知道HTML5在HTML4的基础上，增加了很多新的特性和元素，其中也包括定义元素；比如：header, section, footer, aside, nav…但是这些元素在低版本的IE浏览器中是不支持的。

所以针对此问题，我学习了两种方法解决。希望对大家也有所帮助

1.方法：我们都知道，这些新定义的元素都是用来页面布局的，都是块级元素，所以我们可以通过CSS样式设置display 属性值为 block: 也就是把它们变成行内元素；但是在此之前，我们必须通过script标签对浏览器声明我们的新定义元素。例如：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         *{
  8.             padding: 0;
  9.             margin: 0;
  10.         }
  11.         header{
  12.             display: block;
  13.             width: 100%;
  14.             height: 100px;
  15.             background: red;
  16.         }
  17.         nav{
  18.             display: block;
  19.             width: 100%;
  20.             height: 50px;
  21.             background: aqua;
  22.         }
  23.         main{
  24.             display: block;   //转换为行内元素
  25.             width: 100%;
  26.             height: 500px;
  27.             background: #ff9d76;
  28.         }
  29.         main>article{
  30.             width: 70%;
  31.             height: 100%;
  32.             background: #000;
  33.             float: left;
  34.         }
  35.         main>aside{
  36.             width: 30%;
  37.             height: 100%;
  38.             background: #896;
  39.             float: right;
  40.         }
  41.         footer{
  42.             display: block;
  43.             width: 100%;
  44.             height: 40px;
  45.             background: blueviolet;
  46.         }
  47.     </style>
  48. </head>
  49. <body>
  51. <!--IE8及以下浏览器：完全不支持HTML5的语义标签，所以无法解析这些标签，也就意味着样式无效-->
  52. <header>头部</header>
  53. <nav>导航</nav>
  54. <main>
  55.     <article>左边</article>
  56.     <aside>右边</aside>
  57. </main>
  58. <footer>底部</footer>
  60. <!--解决方法一：-->
  61. <script>
  62. <!--    手动创建标签   -->
  63.     document.createElement("header","nav","main","footer","article","aside")
  64. </script>
  65. </body>
  66. </html>

2：方法2：引入第三方插件：
html5shiv.main,js:在默认请款下，IE8及以下版本不支持后台，HTML5，引入这个文件就可以做到兼容

  1. <!--解决方法二：引入第三方插件  html5shiv.main,js:在默认请款下，IE8及以下版本不支持后台，HTML5，引入这个文件就可以做到兼容-->
  2. <script src="js/html5shiv.min.js">
  3. </script>

发表评论

表情：
评论列表 （有 0 条评论，474人围观）

还没有评论，来说两句吧...

相关阅读

    相关 让IE支持HTML5

    HTML5能为我们做的事儿很多，最为可口的就是语义化标签的应用，如果你已经在Chrome或者其他支持HTML5的浏览器上用过它，那这篇文章对你一定有用，因为现在你也可以在IE上

    Myth丶恋晨Myth丶恋晨/ 0 赞/ 343 阅读