详解HTML5浏览器兼容性解决方案-木庄网络博客

本文摘自PHP中文网，作者黄舟，侵删。

目前大部分浏览器均支持HTML5。但是部分低版本的浏览器对HTML5支持存在一些问题。

低版本浏览器支持HTML5

所有浏览器，对无法识别的元素会作为内联元素自动处理。因此可以采用如下方法教会浏览器处理 “未知” 的 HTML 元素。

将 HTML5 元素定义为块元素

HTML5 定了 8 个新的 HTML 语义（semantic）元素。所有这些元素都是块级元素。
为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block:

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

为 HTML 添加新元素

下面的实例向 HTML 添加的新的元素，并为该元素定义样式，元素名为 <myElement> ：

<!DOCTYPE html><html><head><meta charset="utf-8">
  <title>为 HTML 添加新元素</title>
  <script>document.createElement("myElement")</script>
  <style>
  myElement{    
  display: block;    
  background-color: #ddd;    
  padding: 50px;    
  font-size: 30px;  
  } 
  </style> 
  </head>
  <body>
  <h1>我的第一个标题</h1>
  <p>我的第一个段落。</p>
  <myElement>我的第一个新元素</myElement>
  </body>
  </html>