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

ie6、7下,若元素设置margin值为负值,则margin负值区域会有一部分会离奇的消失,无法在页面上看到(相当于父元素设置了overflow:hidden后,子元素超出父元素部分就会被砍掉的效果一样)

问题重现代码:

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

解决问题后的代码:

<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的属性!

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

时间: 2024-10-11 16:01:30

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

ie6,ie7,ie8 css bug汇总以及兼容解决方法

1:li边距“无故”增加 任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑,仔细“研究”发现是由于其低级元素ul的padding引 起,padding的上下值对li有影响,左右无影 响.所以只好笨手笨脚地把padding去掉,换成margin.这是能解决问题,但往往不是我们想要的结果,或许 还会引起其他不必要的怪现象. 解决这个问题的方法,其实很简单,既然是有ul引 起的,就设置ul的显示形

IE6/IE7浏览器不支持display: inline-block;的解决方法

display: inline-block;在IE6与IE7中存在bug. 1.inline元素的display属性设置为inline-block时,所有的浏览器都支持: 2.block元素的display属性设置为inline-block时,IE6/IE7浏览器是不支持的: IE中对内联元素使用display:inline-block,IE是不识别的,但使用display:inline-block在IE下会触发layout,从而使内联元素拥有了display:inline-block属性的表征

IE6/IE7浏览器中&quot;float: right&quot;自动换行的解决方法

在项目中,调试IE6/IE7,发现一个bug,那就是:在同一个div包裹着,几个块级元素并列为一行的情况下,设置了float:right的块级元素会自动换行: 代码如下: <p> <span>版权所有</span> <span style="float=right;"> <a href="#">申请入驻</a> <a href="#">申请合作</a>

ie6背景透明的设置方法 ie6背景颜色透明和png图像透明解决方法

IE6浏览器,让我们又爱又恨.爱它的是,可以让我们写的代码的时候,可以更标准,恨的是,它有太多无厘头的IE6常见bug(详情点击),让我们焦头烂额.现在现在用百度浏览器调查,国内占有率不到6%了,但是,就怕碰到需要调兼容ie6的网站. 其中,一个IE6常见问题就是IE6透明背景问题了.透明背景主要分背景颜色透明和背景图片或者png图片透明问题. 一.IE6背景颜色透明 一般浏览器,给一个盒子透明背景写法是 :opacity: 0.5;   -moz-opacity: 0.5;-webkit-op

margin负值的应用

CSS盒模型中,margin是我们老熟悉的一个属性了, 它的负值你用过吗? 你知道margin负值的秘密武器吗?我们一起看看吧! 带竖线分隔的横向列表 传统的分隔符是使用 “|” 来实现的,弊端显而易见,不利于表现与结构的分离,同时增加了后台输出时的判断工作.所以我们采用border-left 左边框来模拟分割线,然后通过margin-left:-1px隐藏掉第一个列表项的边框,父元素设置 overflow:hidden 来隐藏溢出部分,这样完美达到首尾无分割线的要求. 2012-5-4 更新

IE6 Bug解决方法HACK汇总

1.终极方法:条件注释<!--[if lte IE 6]> 这段文字仅显示在 IE6及IE6以下版本. <![endif]--><!--[if gte IE 6]> 这段文字仅显示在 IE6及IE6以上版本. <![endif]--><!--[if gt IE 6]> 这段文字仅显示在 IE6以上版本(不包含IE6). <![endif]--><!--[if IE 5.5]> 这段文字仅显示在 IE5.5. <![e

IE6常见的bug及解决方法

1.IE6怪异解析之padding与border算入宽高 原因:未加文档声明造成非盒模型解析 解决方法:加入文档声明<!doctype html> 2.IE6在块元素.左右浮动.设定marin时造成margin双倍(双边距) 解决方法:display:inline 3.以下三种其实是同一种bug,其实也不算是个bug,举个例子:父标签高度20,子标签11,垂直居中,20-11=9,9要分给文字的上面与下面,怎么分?IE6就会与其它的不同,所以,尽量避免. 1)字体大小为奇数之边框高度少1px

【转】 IE6 IE7 IE8 css bug兼容性解决方法总结归纳

1:li边距“无故”增加 任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑,仔细“研究”发现是由于其低级元素ul的padding引 起,padding的上下值对li有影响,左右无影 响.所以只好笨手笨脚地把padding去掉,换成margin.这是能解决问题,但往往不是我们想要的结果,或许 还会引起其他不必要的怪现象. 现在终于发现解决这个问题的方法,其实很简单,既然是有ul引 起的,就设置

ie6,ie7,ie8 css bug兼容解决方法

IE浏览器以不支持大量的css 属性出名,同时也因其支持的css属性中存在大量bug. 这里收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法! 普通IE css bug bug名称 影响版本 描述 Image Label Focus Bug IE8,IE7,IE6 <img>元素在<label>元素之内,单击时,焦点不会转移到相应的表单控件 按钮Margin-A