HTML5 兼容 - 菜鸟教程

HTML5兼容

本章教您怎么让旧版的浏览器去兼容HTML5 所有现代浏览器都支持HTML5。此外，所有旧版和新版浏览器都会自动将无法识别的元素作为内联元素处理。因此，您可以“教”旧浏览器来处理“未知”HTML元素。

您甚至可以教IE6（Windows XP 2001）如何处理未知的HTML元素。

将语义元素定义为块元素

HTML5定义了八个新的语义元素。所有这些都是块级元素。要确保旧浏览器中的正确行为，您可以设置要阻止的这些HTML元素在旧浏览器显示为内联元素：

header, section, footer, aside, nav, main, article, figure {
         display: block; 
       }

将新元素添加到HTML

您还可以使用浏览器技巧将新元素添加到HTML页面。此示例添加一个名为<myDemo>HTML页面的新元素，并为其定义样式：

<!DOCTYPE html>
     <html>
     <head>
     <script>document.createElement("myDemo")</script>
     <style>
     myDemo {
         display: block;
         background-color: #dddddd;
         padding: 50px;
         font-size: 30px;
     } 
     </style> 
     </head>
     <body>

     <h1>标题</h1>

     <myDemo>我新建的HTML元素</myDemo>

     </body>
     </html>

尝试一下

document.createElement("myDemo")在IE 9及更早版本中创建新元素需要JavaScript语句。

IE8的问题

您可以将上述解决方案用于所有新的HTML5元素。但是，IE8（及更早版本）不允许使用未知元素的样式！天无绝人之路，Sjoerd Visscher创建了HTML5Shiv！HTML5Shiv是一种JavaScript解决方法，可以在版本9之前的IE版本中启用HTML5元素的样式。您将需要HTML5shiv为早于IE 9的IE浏览器提供兼容性。

header, section, footer, aside, nav, main, article, figure {
         display: block; 
       }

HTML5Shiv放在<head>标签内。 HTML5Shiv是一个在<script>标记中引用的javascript文件。当您使用新的HTML5元素，你应该使用HTML5Shiv如：<article>，<section>，<aside>，<nav>，<footer>。 ; 您可以从github下载最新版本的HTML5shiv或参考CDN版本，网址为：https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js。语法如下：

<head>
         <!--[if lt IE 9]>
           <script src="/js/html5shiv.js"></script>
         <![endif]-->
       </head>

如果您不想在网站上下载和存储HTML5Shiv，则可以参考CDN网站上的版本。 HTML5Shiv脚本必须放在<head>元素中，放在任何样式表之后：

<!DOCTYPE html>
       <html>
       <head>
       <meta charset="UTF-8">
       <style>
           article{
             color: red;
           }
       </style>
       <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
       <![endif]-->
       </head>
       <body>

       <section>

       <h1>著名的城市</h1>

       <article>
       <h2>伦敦</h2>
       <p>伦敦是英国的首都。它是英国人口最多的城市，拥有超过1300万人口的大都市。</p>
       </article>

       <article>
       <h2>巴黎</h2>
       <p>巴黎是法国的首都和人口最多的城市。</p>
       </article>

       <article>
       <h2>东京</h2>
       <p>东京是日本的首都，是大东京地区的中心，也是世界上人口最多的大都市区。</p>
       </article>

       </section>

       </body>
       </html>

尝试一下