原文來自：http://huilang.me/ie8-html5/
最近仿的幾個主題中，有幾個是采用html5語法制作的，html5嘛，以后必然大勢所趨，但是現有的很多瀏覽器並不支持這種新的標准。
而我制作網站習慣用的是chrome瀏覽器的，當然不存在不兼容問題了。
等主題做完上線后，經ie8以下瀏覽器測試，頁面慘不忍睹，我在ie10的ie8模式下查看了ie7解析html的語法全部亂了，比如
<footer>這里是footer部分</footer>
他在ie8以下解析成了
<footer/>這里是footer部分</footer/>
注意下其中的/符號，整個框架在ie8以下全部被無視掉了，且其他的語法 如<aside></aside>
;<header><header/>;等等都解析錯誤
這個后果就造成了針對footer,header,aside等的css全部失效，后果可想而知吧。
或許是我對html5這種語法還很陌生吧,網上百度了下居然沒找到解決方法，然后就在幾個交流群中咨詢了下，但是無功而返，但是群友提醒了一句是不是meta信息問題，我也嘗試了下，還是不行，然后我只能對比其他的HTML5站點是怎么實現解析的，最終在源碼中發現他們在里面加了一句js，使得低版本的瀏覽器也能正常解析。糾結。。。下面就是對應的js代碼了。
//方法：創建html5元素header,……footer等等
<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>
然后把你用到的標簽加進去吧，這樣就能正常解析了。
但是不管使用以上哪種方法,都要初始化新標簽的CSS.因為HTML5在默認情況下表現為內聯元素，對這些元素進行布局我們需要利用CSS手工把它們轉為塊狀元素方便布局
/*html5*/ article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
demo:
<!doctype html> <html> <head> <title>first.fm</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { margin:0; padding:0; font-family:Arial; background:#ccc; } header { text-shadow: 0 1px #000; background: #ff3019; /* Old browsers */ background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 20%, #ff3019 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(20%,#cf0404), color-stop(100%,#ff3019)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 20%,#ff3019 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ff3019 0%,#cf0404 20%,#ff3019 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 20%,#ff3019 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#ff3019',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #ff3019 0%,#cf0404 20%,#ff3019 100%); /* W3C */ } h1 { padding:0.5em 0.2em; margin:0; font-size: 18px; color:white; } h2 { text-shadow: 0 1px #FFFFFF; background: #eeeeee; /* Old browsers */ background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* W3C */ padding:0.5em 0.2em; margin:0; font-size: 16px; color:#000; } nav ul { border-top:1px solid #fff; list-style-type: none; padding:0; margin:0; } nav li { padding:0.5em 0.2em; margin:0; background:#AFAFAF; border-bottom:1px solid #fff; } nav li a { height:20px; display:block; text-decoration:none; color:white; } /*html5*/ article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block} </style> <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> </head> <body> <header> <h1>first.fm</h1> </header> <div id="main"> <h2>Pages</h2> <nav> <ul class="list"> <li class="list"><a href="music.html">Music</a></li> <li class="list"><a href="radio.html">Radio</a></li> <li class="list"><a href="events.html">Events</a></li> <li class="list"><a href="charts.html">Charts</a></li> <li class="list"><a href="community.html">Community</a></li> <li class="list"><a href="help.html">Help</a></li> <li class="list"><a href="about.html">About</a></li> </ul> </nav> </div> <footer> <small>© 2011 first.fm</small> </footer> </body> </html>