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

原创 2013年12月03日 16:58:59

我们都知道,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;}


现在所有IE下都表现一致了,ok。

关于css脱离标准文档流的两种方式

所谓脱离标准文档流就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。 第一种方式:浮动(float):不浮动的盒子会无视浮动的盒子,假使现有两个盒子,一个...
  • tongxinmiao
  • tongxinmiao
  • 2016年09月09日 13:35
  • 3945

html/css基础篇——DOM中关于脱离文档流的几种情况分析

所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。脱离文档流即是元素打乱了这个排列,或是从排版中拿走。...
  • chen_hua89
  • chen_hua89
  • 2016年03月08日 09:24
  • 1367

CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别

所谓脱离文档流,即将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当没看到它,两者位置重叠都是可以的。这里,通过讲解浮动脱离文档流(float)和绝对定位脱离文档流(position:absol...
  • ParanoidYang
  • ParanoidYang
  • 2017年03月14日 22:15
  • 2898

关于css脱离标准文档流的两种方式

所谓脱离标准文档流就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。 第一种方式:浮动(float):不浮动的盒子会无视浮动的盒子,假使现有两个盒子,一个...
  • tongxinmiao
  • tongxinmiao
  • 2016年09月09日 13:35
  • 3945

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

我们都知道,IE6-IE8对于html5的大部分新标签是不认识不支持的。所以在实际中也产生了许多这方面的插件,如html5shiv,不过如果页面内使用html5标签很少的情况下,反而使用插件显得有些累...
  • MHuajian
  • MHuajian
  • 2016年09月18日 21:45
  • 253

float与absolute脱离文档流的区别

CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。   需要注意的是,使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子...
  • qq_34574621
  • qq_34574621
  • 2017年06月28日 23:20
  • 132

CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别

所谓脱离文档流,即将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当没看到它,两者位置重叠都是可以的。这里,通过讲解浮动脱离文档流(float)和绝对定位脱离文档流(position:absol...
  • H12KJGJ
  • H12KJGJ
  • 2017年12月16日 17:59
  • 88

普通文档流,定位(绝对,相对,固定),浮动

开篇介绍:在CSS中是有三种定位机制的:普通文档流、浮动和绝对定位。在未指定其它两种定位机制的情况下,所有框都是在普通文档流中定位的。 1、普通文档流 即就是根据块级元素的标签在HTML里的顺序,从上...
  • xuexizhe88
  • xuexizhe88
  • 2016年06月27日 11:45
  • 1929

元素脱离普通文档流后特点及问题总结

在使用float,position:absolute | fixed属性之后元素会脱离普通文档流,与inline-block和position:relative不同,后两者还在普通文档流中。 对于行...
  • cyp18408251336
  • cyp18408251336
  • 2016年08月28日 14:59
  • 539

如何解决 定位和float 造成的脱离文档流

float以及 position的absolute、fixed,会导致设置这些属性的一个,都会脱离文档~ 在这,给大家总结一下我自己经历: 一、关于float: 代码: .box1{ ...
  • RainGirlLivia
  • RainGirlLivia
  • 2016年12月03日 13:39
  • 4243
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:IE8下html5标签脱离文档流的现象及其解决方式
举报原因:
原因补充:

(最多只允许输入30个字)