IE8下html5标签脱离文档流的现象及其解决方式

我们都知道，IE6-IE8对于html5的大部分新标签是不认识不支持的。所以在实际中也产生了许多这方面的插件，如html5shiv，不过如果页面内使用html5标签很少的情况下，反而使用插件显得有些累赘，有点大炮打蚊子的感觉。最简单的方式其实是下面的方式：

[javascript] view plain copy

1.     <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的标签了，我的例子是：

[html] view plain copy

1.    <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><span><span></span></span>

只不过对于IE8，你会发现是个例外。最外层的footer元素脱离了文档流，高宽都是0；不管你显式定义CSS width和height属性还是使用对付IE6-7脱离文档流的惯用*zoom:1都不起作用。最后经过测试发现，IE8需要将footer元素显式声明为块状元素后其宽高才能生效。个人猜测可能是IE8默认将这些用户创建的标签默认置为了行内元素，故而不进行强制转换，是无法表现出块元素的行为的。

[css] view plain copy

    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;}