轉: 讓html5標籤在ie8及如下的被正確解析的解決方案

時間 2019-11-26

標籤 html5 html 標籤 ie8 如下正確解析解決方案欄目 HTML5 简体版

原文原文鏈接

最近仿的幾個主題中，有幾個是採用html5語法制做的，html5嘛，之後必然大勢所趨，可是現有的不少瀏覽器並不支持這種新的標準。javascript

而我製做網站習慣用的是chrome瀏覽器的，固然不存在不兼容問題了。css

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--<script type="text/javascript">
    document.createElement('header');
    document.createElement('nav');
    document.createElement('figcaption');
    document.createElement('figure');
    document.createElement('section');
    document.createElement('article');
    document.createElement('aside');
    document.createElement('footer'); 
    //注意是在header裏面引入或寫兼容js, 在頁面底部無效。這樣建立對應標籤 經測試ie8能正常識別標籤，但標籤都變成行內元素，
    //仍是google的html5.js這個加強腳本好，能讓標籤表現爲正常的塊級或行內元素。
</script>-->
<script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
</head>
<body>
<header> it is header content </header>
<footer> it is footer content</footer>


</body>
</html>

等主題作完上線後，經ie8如下瀏覽器測試，頁面慘不忍睹，我在ie10的ie8模式下查看了ie7解析html的語法所有亂了，好比html

<footer>這裏是footer部分</footer>html5

他在ie8如下解析成了java

<footer/>這裏是footer部分</footer/>chrome

注意下其中的/符號，整個框架在ie8如下所有被無視掉了，且其餘的語法如<aside></aside>canvas

;<header><header/>;等等都解析錯誤瀏覽器

這個後果就形成了針對footer,header,aside等的css所有失效，後果可想而知吧。框架

或許是我對html5這種語法還很陌生吧,網上百度了下竟然沒找到解決方法，而後就在幾個交流羣中諮詢了下，可是無功而返，可是羣友提醒了一句是否是meta信息問題，我也嘗試了下，仍是不行，而後我只能對比其餘的HTML5站點是怎麼實現解析的，最終在源碼中發現他們在裏面加了一句js，使得低版本的瀏覽器也能正常解析。糾結。。。下面就是對應的js代碼了。ide

<script type="text/javascript">document.createElement('header'); document.createElement('nav'); document.createElement('figcaption'); document.createElement('figure'); document.createElement('section'); document.createElement('article'); document.createElement('aside'); document.createElement('footer');</script>

或者用下面這句也能夠

<script type="text/javascript">(function(){var e="abbr,article,aside,audio,canvas,datalist,details,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i]);}}());</script>

或者用Google的html5兼容性js也行（ps:國內部分地區被牆，最好下載到本地後加載）

<script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

而後把你用到的標籤加進去吧，這樣就能正常解析了。