詳解HTML5瀏覽器相容性解決方案-H5教程-PHP中文網

詳解HTML5瀏覽器相容性解決方案

黄舟

發布： 2017-03-16 16:19:37

原創

2081 人瀏覽過

目前大部分瀏覽器均支援HTML5。但是部分低版的瀏覽器對HTML5支援存在一些問題。

低版瀏覽器支援HTML5

所有瀏覽器，對無法辨識的元素會作為內嵌元素自動處理。因此可以採用以下方法教會瀏覽器處理 “未知” 的 HTML 元素。

將 HTML5 元素定義為區塊元素

HTML5 定了 8 個新的 HTML 語意（semantic）元素。所有這些元素都是區塊級元素。
為了能讓舊版的瀏覽器正確顯示這些元素，你可以設定CSS 的display 屬性值為block:

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>

登入後複製

document.createElement( “myElement”) 是為IE 瀏覽器新增新的元素。

Internet Explorer 瀏覽器問題

你可以使用上述方法為瀏覽器新增新的元素，但IE8及以下版本無法支援此種方式。
我們可以使用Sjoerd Visscher 建立的「HTML5 Enabling JavaScript」, 」 shiv」來解決這個問題:

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

登入後複製

或

<!--[if lt IE 9]>
  <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

登入後複製

以上程式碼的作用是，在IE 瀏覽器的版本小於IE9 時將讀取html5.js 文件，並解析它。前一個是國goole資源，後面一個是國內百度的資源。

針對IE瀏覽器html5shiv 是比較好的解決方案。 html5shiv主要解決HTML5提出的新的元素不被IE6-8識別，這些新元素不能作為父節點包裹子元素，並且不能應用CSS樣式。

下面是採用html5shiv方案的實例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>渲染 HTML5</title>
  <!--[if lt IE 9]>
  <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js">
  </script>
  <![endif]--></head><body><h1>我的第一个HTML5页面</h1>
  <article>Hello，world！</article>
  </body>
  </html>

登入後複製

以上是詳解HTML5瀏覽器相容性解決方案的詳細內容。更多資訊請關注PHP中文網其他相關文章！