詳細介紹HTML5新標籤的兼容性處理（圖）-H5教程-PHP中文網

首頁

web前端

H5教程

詳細介紹HTML5新標籤的兼容性處理（圖）

黄舟

Mar 31, 2017 pm 01:34 PM

HTML5新的語意標籤儘管有很多的好處，但是在低版本的老IE瀏覽器中還是存在兼容性問題的，常常讓人感到頭疼，到底是大膽的使用新標籤還是使用傳統的大量的DIV無義標籤？今天就簡單的來看看H5新標籤的兼容性處理方式。

首先來看一小段簡單的程式碼：

HTML程式碼：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>测试H5新标签兼容性</title>
 
    <style>
        header, footer{width:50px; height: 50px; background-color: #f00;}
    </style>
</head>
<body>
<header id="header">header</header>
<footer id="footer">footer</footer>
 
</body>
</html>

登入後複製

Google瀏覽器下：

詳細介紹HTML5新標籤的兼容性處理（圖）

IE6瀏覽器下：

詳細介紹HTML5新標籤的兼容性處理（圖）

很明顯，header和footer在支援H5新標籤的瀏覽器下已區塊級元素呈現，而在IE8及以下的瀏覽器中以文字呈現並且樣式沒有起作用，說明不被支持，那該如何解決呢？

首先，第一種方法便是使用DOM操作來新增這些標籤，既然瀏覽器不支持，那我自己來建立一個：

HTML程式碼：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>测试H5新标签兼容性</title>
    <script>
        document.createElement(&#39;header&#39;);
        document.createElement(&#39;footer&#39;);
    </script>
    <style>
        header, footer{display: block; width:50px; height: 50px; background-color: #f00;}
    </style>
</head>
<body>
<header id="header">header</header>
<footer id="footer">footer</footer>
 
</body>
</html>

登入後複製

這時候，我們再來看看IE6瀏覽器顯示的效果：

詳細介紹HTML5新標籤的兼容性處理（圖）

#紅色的背景色可以顯示出來了，說明透過document.createElement ()這方法是可行的，那為什麼樣式的寬高不起作用呢？因為加入的元素是內嵌元素，內嵌元素是沒有寬高的，在了解這一點以後，我們再給案例中的header和footer加上一個"display: block;"屬性，看看效果會有什麼改變。

<style>
    header, footer{display: block; 
                   width:50px; height: 50px; 
                   background-color: #f00;}
</style>

登入後複製

IE6瀏覽器顯示的效果：

詳細介紹HTML5新標籤的兼容性處理（圖）

現在顯示的效果跟我們需要的就完全一樣了，也就是說透過這種方法可以解決H5新標籤在舊IE瀏覽器中的相容問題。但是，另外一個問題，那麼多的新標籤，如果每個都要透過這種方法去生產的話，是不是太麻煩了呢？

所以，我們現在介紹第二種方式，直接借用前輩大牛封裝好的js庫--- html5shiv.js

HTML程式碼：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>测试H5新标签兼容性</title>
    <script src="js/html5shiv.js"></script>
 
</head>
<body>
<header id="header">header</header>
<footer id="footer">footer</footer>
<script src="js/jquery-1.11.0.min.js"></script>
 
<script>
    $(&#39;#header&#39;).css(&#39;color&#39;,&#39;#f00&#39;);
    $(&#39;#footer&#39;).css({&#39;width&#39;:&#39;100px&#39;,&#39;height&#39;:&#39;100px&#39;,
                      &#39;border&#39;:&#39;1px solid #ddd&#39;,
                      &#39;backgroundColor&#39;:&#39;#f00&#39;});
    $(&#39;#header&#39;).html(&#39;我是一只小小鸟&#39;);
</script>
 
</body>
</html>

登入後複製

那我們現在直接開啟IE6瀏覽器看效果：

詳細介紹HTML5新標籤的兼容性處理（圖）

完全可以實現我們想要的效果，而且操作更加的簡單，程式碼量更少，大家不妨也可以在IE7和IE8瀏覽器中也測試一下。

以上是詳細介紹HTML5新標籤的兼容性處理（圖）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7775

Java教學

1644

CakePHP 教程

1399

Laravel 教程

1296

PHP教程

1234

Related knowledge

h5項目怎麼運行 Apr 06, 2025 pm 12:21 PM

運行 H5 項目需要以下步驟：安裝 Web 服務器、Node.js、開發工具等必要工具。搭建開發環境，創建項目文件夾、初始化項目、編寫代碼。啟動開發服務器，使用命令行運行命令。在瀏覽器中預覽項目，輸入開發服務器 URL。發布項目，優化代碼、部署項目、設置 Web 服務器配置。

H5頁面製作究竟指什麼 Apr 06, 2025 am 07:18 AM

H5 頁面製作是指使用 HTML5、CSS3 和 JavaScript 等技術，創建跨平台兼容的網頁。其核心在於瀏覽器解析代碼，渲染結構、樣式和交互功能。常見技術包括動畫效果、響應式設計和數據交互。為避免錯誤，應使用開發者工具調試；而性能優化和最佳實踐則包括圖像格式優化、減少請求和代碼規範等，以提高加載速度和代碼質量。

h5怎麼製作點擊圖標 Apr 06, 2025 pm 12:15 PM

製作 H5 點擊圖標的步驟包括：在圖像編輯軟件中準備方形源圖像。在 H5 編輯器中添加交互性，設置點擊事件。創建覆蓋整個圖標的熱點。設置點擊事件的操作，如跳轉頁面或觸發動畫。導出 H5 文檔為 HTML、CSS 和 JavaScript 文件。將導出的文件部署到網站或其他平台。

H5指的是什麼？探索上下文 Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo