IE8下html5標籤脫離文檔流的現象及其解決方式

我們都知道，IE6-IE8對於html5的大部分新標籤是不認識不支持的。所以在實際中也產生了許多這方面的插件，如html5shiv，不過如果頁面內使用html5標籤很少的情況下，反而使用插件顯得有些累贅，有點大炮打蚊子的感覺。最簡單的方式其實是下面的方式：

	<script type="text/javascript">
		var tagArray = ["header","nav","article","footer"];
		for(var i = 0; i < tagArray.length; i++){
			document.createElement(tagArray[i]);
		}
	</script>

這樣這些老舊IE瀏覽器便能識別這些html5的標籤了，我的例子是：

<footer>
	<div class="footer-inner">
		<div class="footer-left">
			<div class="selflogo">
				<img src="http://js.8783.com/static/images/selflogo.png" alt="8783官方網站" >
			</div>
			<div class="slogan">
				<img src="http://js.8783.com/static/images/slogan.png" alt="8783,手遊玩家樂園" >
			</div>
		</div>
		<nav class="bottom-nav"><a class="navitem" href="#" target="_blank" titie="">關於8783</a>|<a class="navitem" href="#" target="_blank" titie="">商務合作</a>|<a class="navitem" href="#" target="_blank" titie="">聯繫我們</a></nav>
		<div class="copyright">Copyright © 2013 8783.com All Rights Reserved</div>
		<div class="copyright">8783手遊網  版權所有</div>
		<div class="account">
			<div class="public">
				<p class="ptit">8783手遊網微信公衆號</p>
				<div class="pimg">
					<a class="pimg-item" href="#" id="weibo" title="" target="_blank"></a>
					<a class="pimg-item" href="#" id="qq" title="" target="_blank"></a>				
				</div>
			</div>
			<div class="acode">
				<img src="http://i0.8783.com/image/20131119/20131119165521_82803.jpg" alt="">
				<p class="ptit">微信號：8783</p>
			</div>
		</div>
	</div>
</footer>

只不過對於IE8，你會發現是個例外。最外層的footer元素脫離了文檔流，高寬都是0；不管你顯式定義CSS width和height屬性還是使用對付IE6-7脫離文檔流的慣用*zoom:1都不起作用。最後經過測試發現，IE8需要將footer元素顯式聲明爲塊狀元素後其寬高才能生效。個人猜測可能是IE8默認將這些用戶創建的標籤默認置爲了行內元素，故而不進行強制轉換，是無法表現出塊元素的行爲的。

footer{ display:block;background: #000;color: #777;width: 100%;min-width:980px;height: 137px;text-align: center;line-height: 25px;margin: 0 auto; padding-bottom:10px; font-family: simsun;font-size: .857em;overflow: hidden; *zoom:1;}
.footer-inner{position:relative; width: 980px; margin:auto;padding-top: 32px; height: 105px;}
.bottom-nav,.copyright{display:block; width: 100%;text-align: center; /*fix ie6*/}
.copyright{font-family: tahoma,verdana,arial;}
.bottom-nav a.navitem{color: #777;padding: 0 16px 0 15px;}

.footer-left{border-right: 1px solid #777;position: absolute;left: 16px;width: 305px;}
.selflogo{float: left;}
.slogan{margin: 10px 20px 0 90px;}
.account{position: absolute;right: 43px;top: 32px;}
.account .public{float:left; width: 120px;text-align: center;margin-right: 50px;}
.account .acode{float: left;width: 80px;text-align: center;}
.public .ptit{float: left;padding: 0 0 10px 0;}
.acode .ptit{padding: 7px 0;}
.public .pimg{float: left; background: url("../images/pimg.png") no-repeat 0 0 transparent;width: 114px;height: 42px;position: relative;}
.pimg .pimg-item{position:absolute; display: block; width: 50px; height: 100%;}
.pimg .pimg-item#weibo{left: 0;}
.pimg .pimg-item#qq{right: 0;}


.stick-entrance{position: fixed;right: 20px;bottom:80px;background: url("../images/stick.jpg");height: 352px;width: 90px;z-index: 2;}
.ie6fixed{position:absolute;top:expression(eval(document.documentElement.scrollTop + document.documentElement.clientHeight -352 -80))}
.stick-entrance a{display: block;position: absolute;left:0;width: 100%;}
.stick-service{top:0;height: 60px;}
.stick-sinaweibo{top:194px;height: 22px;}
.stick-qqweibo{top:223px;height: 22px;}
.stick-forum{bottom:0;height: 104px;}