问题描述：

在 ie6 中如果一个浮动元素与绝对定位元素相邻的话，在某些情况下绝对定位元素将会消失。

产生原因：

只有当绝对定位元素的邻近浮动元素的宽度大于父层宽度减 3 时（即如果父层宽度是 300px，浮动元素的宽度大于 297px），该绝对定位元素在 ie6 下面会隐藏。

html：

<!DOCTYPE HTML>

<html lang="en">

<head>

    <meta charset="utf-8"/>

    <title>绝对定位的元素在ie6下不显示</title>

</head>

<body>

    <div class="w">

        <div class="fl">浮动元素</div>

        <div class="pa">绝对定位元素</div>

    </div>

</body>

</html>

css：

.w{border:3px solid #000;color:#fff;height:200px;position:relative;width:300px;}

.pa{background:orange;height:100px;position:absolute;right:10px;top:10px;width:100px;}

.fl{background:gray;float:left;height:100px;width:100%;}

ie6 浏览器效果：

其他浏览器效果：

解决方法：

1、调整浮动元素的宽度，即宽度小于或等于父层宽度减 3；

2、在浮动元素与绝对定位元素之间添加一个空的 div（推荐）。

还是以上面的实例为参考：

<!DOCTYPE HTML>

<html lang="en">

<head>

    <meta charset="utf-8"/>

    <title>绝对定位的元素在ie6下不显示</title>

</head>

<body>

    <div class="w">

        <div class="fl">浮动元素</div>

        <div></div>

        <div class="pa">绝对定位元素</div>

    </div>

</body>

</html>

ie6 浏览器和其他浏览器效果：

【css】绝对定位的元素在 ie6 下不显示的更多相关文章

  1. css绝对定位如何在不同分辨率下的电脑正常显示定位位置？

    有时候我们在写页面中,会发现绝对定位的父级元素已经相对定位了,但是在不同分辨率的电脑下,绝对定位还是会错乱,似乎父级的相对定位并没有起了作用. 首先要明白如下几个原理: 1.笔记本电脑的分辨率一般为1 ...

  2. 解决IE6下select显示在弹出框上问题

    利用定位position:absolute;z-index:1;和iframe[z-index:-1]来解决此问题,最好根据需要加上: border='0' frameborder='0' scrol ...

  3. 让 “微软雅黑” 在IE6下完美显示

    微软雅黑可以说是网页中最常见的字体了,但是往往在IE8+的浏览器上调试得很好,到了IE6则会变成默认的"宋体". 因为宋体字体宽度通常比雅黑的要宽,有时候会把页面都布局挤乱. 为了 ...

  4. IE6下div遮盖select的最优解决方案

    a.本节精选html5/css频道里一款IE6下div遮盖select的最优解决方案 原理:利用iframe来遮挡select,再用div来遮挡iframe,就这么简单. 1)首先,建一个div层和i ...

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

    一般来说,让绝对定位的元素不挨着浮动元素就OK了: 1.当绝对定位层的邻近浮动层的宽度不等于父层宽度时,以及没有清除浮动时,IE6/7,FF中显示一致: 2.当绝对定位层的邻近浮动层的宽度不等于父层宽 ...

  6. IE6下css常见bug处理

    1.双倍边距 如下图所示,一个样式里面既设定了“float:left:”又有“margin-left:100px:”的情况,就呈现了双倍情况.如外边距设置为100px, 而左侧则呈现出200px,解决 ...

  7. css绝对定位元素实现居中的几个方法

    一:CSS绝对定位元素left设为50%实现水平居中 绝对定位的元素left设为50%时,是已左上角为原点的,所以只要再使用margin属性添加负值补偿回来即可.示例:[css]代码如下: #boar ...

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

    1. 在IE6元素浮动,如果宽度需要内容撑开,就给里面的块元素加浮动. 2. IE6下最小高度问题:在IE6下元素高度小于19px的时候,会被当作19px处理.解决方案:给元素加 overflow:h ...

  9. ie6下js更新元素display:block后，仍然不显示的hack办法

    $hotGames.html(html).removeClass("hide").show();//代码执行到这里,在ie6下仍然无法正常显示 //只有执行了下边的两行代码后,才正 ...

随机推荐

  1. Python MySQLdb select（选择） 封装

    对MySQL选择的封装 def select_data(sql): conn = MySQLdb.connect(host="10.10.10.77", user="xx ...

  2. photoshop，钢笔工具锚点类型

    以下是钢笔工具绘制出的三种类型的锚点,分别是:无切线的硬锚点.左右切线平行的锚点.左右切线不平行的锚点. 使用转换点工具点击锚点,可以实现 无切线锚点 和 左右切线平行的锚点 之间的转化: 对 左右切 ...

  3. JDK1.5新特性，基础类库篇，集合框架（Collections）

    集合框架在JDK1.5中增强特性如下: 一. 新语言特性的增强 泛型(Generics)- 增加了集合框架在编译时段的元素类型检查,节省了遍历元素时类型转换代码量. For-Loop循环(Enhanc ...

  4. Android 常用算法

    排序算法 简单排序算法 冒泡排序 两两比较相邻记录的关键字,如果反序则交换,直到没有反序的记录为止 直接插入排序 通过 n-i 次关键字间的比较,从 n-i+1 个记录中选出关键字最小的记录,并和第 ...

  5. Chrome浏览器查看 iframe信息 OpenFrame

    https://chrome.google.com/webstore/search/openframe?hl=zh-CN&_category=extensions 搜索 OpenFrame 添 ...

  6. extern C的作用具体解释

    转载于:http://www.cnblogs.com/rollenholt/archive/2012/03/20/2409046.html 1.引言 C++语言的创建初衷是"a better ...

  7. 【小白的CFD之旅】21 网格划分软件的选择

    但是怎样才能获得流体计算网格呢?“工欲善其事必先利其器”,画网格该用什么器呢?小白决定找黄师姐请教一番. 小白找到黄师姐的时候,黄师姐正在电脑上忙着. “黄师姐,我发现网格划分软件有好多种,究竟哪种才 ...

  8. Git 忽略.idea/workspace.xml文件

    在使用idea进行提交代码时,执行提交时一直出现modified:   .idea/workspace.xml 非常让人烦恼. 问题原因: 原因在于Git的忽略,Git在同步代码时,设置本地忽略文件的 ...

  9. 关于一点pthread_cond_t条件锁的思考以及实验

    转:http://blog.csdn.net/aniao/article/details/5802015 APUE上,关于条件锁.其中有这么几条总结: 1.使用条件锁前必须先锁住对应的互斥锁. 2.条 ...

  10. Logstash使用jdbc同步MySQL中的数据

    [--26T20::,][WARN ][logstash.inputs.jdbc ] Exception when executing JDBC query {:exception=>#< ...