关于IE6下绝对定位元素莫名消失的问题

一般来说,让绝对定位的元素不挨着浮动元素就OK了:

1.当绝对定位层的邻近浮动层的宽度不等于父层宽度时,以及没有清除浮动时,IE6/7,FF中显示一致;

2.当绝对定位层的邻近浮动层的宽度不等于父层宽度时,有清除浮动时,IE6/7不显示绝对定位层,FF显示;

3.当绝对定位层的邻近浮动层的宽度等于父层宽度时,以及没有清除浮动时,IE6不显示绝对定位层,IE7/FF显示;

4.当绝对定位层的邻近浮动层的宽度等于父层宽度时,有清除浮动时,IE6/7不显示绝对定位层,FF显示;

就目前来说我个人的解决办法有两条,第一取消浮动,第二让绝对定位的元素不要挨着浮动的标签。再者就是在绝对定位的层跟浮动层中间插个空的标签。

例如:

<div class="w">
        <div class="fl">浮动元素</div>
        <div></div> //*空的标签
        <div class="pa">绝对定位元素</div>
    </div>
时间: 2024-11-09 04:47:26

关于IE6下绝对定位元素莫名消失的问题的相关文章

IE6下绝对定位元素父级宽高是奇数,绝对定位元素的right和bottom值会有1个像素的偏差

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 .box{ 8 width: 308px; 9 height: 308px; 10 background-color: red; 11 position: absolute; 12 } 13 .content{ 14 wid

IE6下绝对定位层不显示

之前遇到一个超级坑的问题: 一个绝对定位的元素,在firefox,chrome,ie8-9下都可以正常显示,就是IE6中不显示. 尝试过设置z-index, float:left,display,block等,绝对定位的元素还是没有显示出来, 然而,我在此元素上加上 clear属性即可解决: 网上大神解决方法如下: 1.在绝对定位元素外层加一空白div,不应用任何样式.终于,绝对定位的元素显示出来了. 2.在采用"position:aboslute"进行绝对定位的元素前增加一个清除浮动

兼容性—IE6下浮动元素和定位元素并列,定位元素消失

浮动元素和定位元素同级,定位元素消失,代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 400px; height: 400px; position: relative; border:1px solid b

CSS在IE6下的一些BUG和兼容性问题

在IE6,7下面PNG图片问题: 在IE6下,不支持PNG透明图片,解决办法是:在HTML里加上以下一段代码,其中DD_belatedPNG_0.0.8a.js文件可以在百度上找到,DD_belatedPNG_0.0.8a.js是国外一个大神写的JS文件. <!--[if IE 6]> <script src="js/DD_belatedPNG_0.0.8a.js"></script> <script> DD_belatedPNG.fix

ie6下兼容问题

最小高度问题:overflow:hidden 在ie6.7下 li本身不浮动 内容浮动 li产生3像素间隙 解决:vertical-align:top; 二.当ie6下最小高度问题和li间隙问题共存时 给li加浮动 滤镜:标准浏览器[opacity:0.5] ie6[filter:alpha(opacity=50)] 图片底部3像素问题:vertical-align:top; padding是占位置的. ie6下 子元素会撑开父级设置好的宽高  : 计算一定要正确,不要让内容的宽高,超出设置的宽

IE6下CSS常见兼容性问题及解决方案

1. 在IE6元素浮动,如果宽度需要内容撑开,就给里面的块元素加浮动. 2. IE6下最小高度问题:在IE6下元素高度小于19px的时候,会被当作19px处理.解决方案:给元素加 overflow:hidden. 3. border:1px dotted #000: 1px dotted 在IE6下不支持 解决方案:切背景平铺 4. margin传递:解决方案:a.父级或自己浮动; b.给元素加 overflow:hidden;zoom:1; 5. 在IE6下父级有边框的时候,子元素的margi

IE6下的bug

一.IE6双倍边距bug 当页面上的元素使用float浮动时,不管是向左还是向右浮动:只要该元素带有margin像素都会使该值乘以2,例如“margin-left:10px” 在IE6中,该值就会被解析为20px.想要解决这个BUG就需要在该元素中加入display:inline 或 display:block 明确其元素类型即可解决双倍边距的BUG 二.IE6中3像素问题及解决办法 当元素使用float浮动后,元素与相邻的元素之间会产生3px的间隙.诡异的是如果右侧的容器没设置高度时3px的间

绝对定位元素被遮挡

ie7下 绝对定位元素即使z-index值很高,如果其设置相对定位的父元素没有设置z-index值的话,其可能(这种可能性当然是布局存在遮盖的时候)会被后面设置了相对定位的元素遮挡(即使后面的相对定位的元素没有设置z-index值): <div style="position:relative;"> <p style="position:absolute;z-index:99999;"></p> </div> <

ie6兼容之绝对定位元素内容为空时高度问题

正常显示: ie6下显示: line6元素高度最小16px; 解决办法: 添加内容在空的div里,并且设置行高即可. 其中,非ie6浏览器不需要再空的div里加无谓的内容,再次需要用“条件注释”来解决: 条件注释使用方法 1 2 3 4 5 6 <!--[if IE 5]>仅IE5.5可见<![endif]--> <!--[if gt IE 5.5]>仅IE 5.5以上可见<![endif]--> <!--[if lt IE 5.5]>仅IE 5