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

简介:

<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
相关文章
|
编解码 前端开发 JavaScript
IE上的 The valid characters are defined in RFC 7230 and RFC 3986 坑的解决方法
IE上的 The valid characters are defined in RFC 7230 and RFC 3986 坑的解决方法
313 2
|
缓存 JavaScript 前端开发
IE浏览器下ajax缓存导致数据不更新的解决方法
摘自:http://www.iefans.net/ie-ajax-json-shuju-huancun/ 最近做设计的时候遇到一个小问题,当你用jquery的getjson函数从后台获取数据的时候,IE浏览器会自动设置缓存,如果此时你对数据进行修改的时候刷新页面,IE并不会在页面显示你修改后的数据,因为你刷新的时候IE浏览器会查找缓存并显示你修改前的数据,最后在网上查了些资料终于解决了IE浏览器下的问题。
1319 0
|
Web App开发 .NET 开发框架
在ASP.NET中,IE与Firefox下载文件带汉字名时乱码的解决方法
解决办法: HttpContext.Current.Response.Clear(); HttpContext.Current.Response.Buffer = true; HttpContext.
1057 0
|
Web App开发 Windows
Windows7下32位IE异常不能打开解决方法
今天更新了Update及安装了一些软件,重启电脑后发现32位IE不能正常打开,而64位IE正常。 错误信息如下: 问题签名:  问题事件名称: BEX  应用程序名: iexplore.exe  应用程序版本: 8.
1067 0
IE不显示PNG解决方法一则
方法不是万能的,只针对如下情况: 刚刚安过QuickTime、或ITunes 开始-》运行-》regedit 启动注册表,找到 HKEY_CLASSES_ROOT\MIME\Database\Content Type 将其中中文名的以及乱码的都删除即可如[视频/mp4]
577 0