HTML5新標籤的兼容性處理

時間 2019-11-17

原文原文鏈接

HTML5新的語義標籤儘管有不少的好處，可是在低版本的老IE瀏覽器中仍是存在兼容性問題的，經常讓人感到頭疼，究竟是大膽的使用新標籤仍是使用傳統的大量的DIV無義標籤？今天就簡單的看看H5新標籤的兼容性處理方式。css

首先來看一小段簡單的代碼：html

HTML代碼：html5

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>測試H5新標籤兼容性</title>
 6 
 7     <style>
 8         header, footer{width:50px; height: 50px; background-color: red;}
 9     </style>
10 </head>
11 <body>
12 <header id="header">header</header>
13 <footer id="footer">footer</footer>
14 
15 </body>
16 </html>

Google瀏覽器下：jquery

IE6瀏覽器下：瀏覽器

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

首先，第一種方法即是使用DOM操做來添加這些標籤，既然瀏覽器不支持，那我本身來建立一個：spa

HTML代碼：code

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>測試H5新標籤兼容性</title>
 6     <script>
 7         document.createElement('header');
 8         document.createElement('footer');
 9     </script>
10     <style>
11         header, footer{display: block; width:50px; height: 50px; background-color:red;}
12     </style>
13 </head>
14 <body>
15 <header id="header">header</header>
16 <footer id="footer">footer</footer>
17 
18 </body>
19 </html>

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

紅色的背景色能夠顯示出來了，說明經過document.createElement()這一方法是可行的，那爲何樣式的寬高不起做用呢？由於添加的元素是內聯元素，內聯元素是沒有寬高的，在瞭解這一點之後，咱們再給案例中的header和footer添加一個"display: block;"屬性，看看效果會有什麼變化。blog

1 <style>
2     header, footer{display: block; 
3                    width:50px; height: 50px; 
4                    background-color: red;}
5 </style>

IE6瀏覽器顯示的效果：

如今顯示的效果跟咱們須要的就徹底同樣了，也就是說經過這種方法能夠解決H5新標籤在老IE瀏覽器中的兼容問題。可是，另一個問題，那麼多的新標籤，若是每一個都要經過這種方法去生產的話，是否是太麻煩了呢？

因此，咱們如今介紹第二種方式，直接借用前輩大牛封裝好的js庫 --- html5shiv.js

HTML代碼：

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>測試H5新標籤兼容性</title>
 6     <script src="js/html5shiv.js"></script>
 7 
 8 </head>
 9 <body>
10 <header id="header">header</header>
11 <footer id="footer">footer</footer>
12 <script src="js/jquery-1.11.0.min.js"></script>
13 
14 <script>
15     $(‘#header‘).css('color','#f00');
16     $(‘#footer‘).css({'width':'50px','height':'50px',
17                       'border':'1px solid #ddd',
18                       'backgroundColor':'red'});
19     $('#header').html('h5標籤兼容');
20 </script>
21 
22 </body>
23 </html>