Html5 tag disconnection from Document Stream in IE8 and Its Solution

We all know that IE6-IE8 is not supported by most of the new labels of html5. Therefore, many plug-ins are also generated in practice, such as html5shiv. However, if there are few html5 tags on the page, it seems a little cumbersome to use the plug-in, and it is a bit difficult to crack the mosquitoes. The simplest method is actually the following:

 

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

In this way, these old ie browsers can recognize these html5 labels. My example is:

 

 

Copyright©2013 8783.com All Rights Reserved8783 All Rights Reserved

8783 shouyou public account

 

Number: 8783

However, for IE8, you will find it an exception. The footer element of the outermost layer is out of the document stream, and the height and width are both 0; whether you explicitly define the CSS width and height attributes or use the usual * zoom to deal with the IE6-7 off the Document Stream: 1 does not work. Finally, it is found that IE8 needs to explicitly declare the footer element as a block element before its width and height can take effect. Personal guesses may be that IE8 sets the tags created by these users as in-row elements by default, so it does not perform forced conversion and cannot show the behavior of block elements.

 

 

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

 

Now all IE instances are consistent. OK.