且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

ie6、7 margin负值部分无法看到的解决方法

更新时间:2022-09-06 11:18:56

<style>
*{margin: 0;padding: 0;}
body{padding: 200px;}
</style>
<div style="widt

<style>
*{margin: 0;padding: 0;}
body{padding: 200px;}
</style>
<div style="width:200px;height:200px;background:#f00;"><div style="margin:0 -20px;background:#080;*zoom:1;_position:relative;">带margin负值的元素</div></div>

复制上面2段代码,分别在ie6、7上运行,可看到“解决问题后的代码”在页面上的展示效果已同其它浏览器效果一样了:带margin负值的元素,负值部分能完全显示出来了!!

对比上面2段代码,发现就只给带margin值为负值的元素加了“*zoom:1;_position:relative;”!

个人理解:加了zoom:1属性触发ie7的hasLayout属性,ie7下margin负值可见,但ie6仍坚持隐藏负值部分,需添加position:relative,添加该属性应该是提高了元素层级(z-index),因此该子元素超出父元素部分就能再次重现了!

很多时候,为解决ie6/7对带margin负值的元素渲染错误导致的页面显示问题,我们还需要在父元素中触发layout,在父元素上加类似*zoom:1  这样触发layout的属性!

h:200px;height:200px;background:#f00;"><div style="margin:0 -20px;background:#080;">带margin负值的元素</div></div>


本文转自  小旭依然  51CTO博客,原文链接:http://blog.51cto.com/xuyran/1786220