Shellway

IE7相对定位元素不显示怎么办?

今天碰到一件怪事。

我的页面content部分在IE7中莫名其妙的就隐藏起来了,把我急了一上午。

这个content的样式是这样的:

.content{padding-top:1px; background:url(../Images/tree_body.png) repeat-y right -1px scroll;}
.content_in{margin-top:-334px; position:relative;}
外面是.content,里面还有一个.content_in,再里面就是一些装饰性的元素(绝对定位的)和内容(相对定位以实现层叠效果)。

这样在火狐中打开一点问题都没有,IE8、IE9RC都没问题,只有在IE7中.content整个隐藏了,但是还占着空间。

后来试了很多方法,去除定位属性,设定left和top属性,给.content和.content_in设置visibility:visible……等等,这些都不起作用。

最后想起一个IE的属性:zoom,试了一下果然行。这个属性可以缩放元素,触发IE中该元素的布局模式(hasLayout),使其有布局结构。

> 在ie中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容。当一个元素的 hasLayout属性值为true时,它负责对自己和可能的子孙元素进行尺寸计算定位。这意味着这个元素需要花更多的代价来维护自身和里面的内容,而不是依赖于祖先元素来完成这些工作。——《认识hasLayout——IE浏览器css bug的一大罪恶根源

好好学习,天天向上