如何讓舊瀏覽器支援HTML5新標籤
阿新 • • 發佈：2022-05-04
如何讓舊瀏覽器支援HTML5新增標籤
HTML5出現也不短了，很多網站的頁面都進行了改版，為了降低程式碼量（不需要起太多的類名），提升載入速度，提高標籤的語義性，因此，在網頁中大量使用了section，article，header等HTML5標籤。自己最近在寫響應式佈局的範例，裡面也使用到了header等標籤。還是比較希望能夠做成相容“舊版瀏覽器”的，在此和大家共享一下，如何讓舊瀏覽器支援HTML5新增標籤。
書寫的基本的HML程式碼：
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>讓舊瀏覽器支援HTML5新增標籤-獨行冰海</title> </head> <body> <header>頂部內容</header> <nav>導航內容</nav> <article>文章內容</article> <footer>底部內容</footer> </body> </html>
Google等新瀏覽器中的表現：
IE6中的表現：
具體步驟
其實，讓舊瀏覽器支援HTML5新增標籤，聽上去很難，操作起來很簡單，只需要你懂DOM操作就足夠了。
首先我們使用js進行標籤的建立，為HTML檔案建立我們需要的這幾個HTML5標籤。
<script> document.createElement('header'); document.createElement('nav'); document.createElement('article'); document.createElement('footer'); </script>
接下來，我們需要使用css進行這幾個HTML5標籤的樣式控制。這是因為，通過這種方法建立的新標籤，預設是行內元素。因此需要新增如下程式碼：
<style>
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary{
display: block;
}
</style>對於程式碼位置，我們需要注意，要將script標籤放置到head中，而不是body的後面，這是因為，瀏覽器從上到下進行程式碼的執行與解析，在已經渲染之後再執行js就沒有任何意義和價值了。