问题描述：

在 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. 案例：用Redis来存储关注关系

    Redis提供了丰富的数据类型,比起关系型数据库或者简单的Key-Value存储(比如Memcached)来,Redis的数据模型与实际应用的数据模型更相近.比如下面说到的好友关系的存储,原作者使用了 ...

  2. KMP算法理解

    1.KMP算法解决问题:对BF(Brute Force)算法优化,避免对主串进行回溯匹配(匹配不成功主串指针向后移1位,子串指针重置开始位置,两串继续匹配),效率底. 2.KMP算法原则/目的:主串不 ...

  3. andorid 直接解压后的xml的解密

    1.首先可以去看看这个gitHub: https://github.com/tracer0tong/axmlprinter 2.把apk.py 和 axmlprinter.py下载下来. 2.1(如果 ...

  4. Java 格式化数字

    ; ){ DecimalFormat df = "); String xs = df.format(x); System.out.println(xs); x++; } 将 1 格式化为 0 ...

  5. python（59）：yield 函数

    可迭代对象: 当你建立了一个列表,你可以逐项地读取这个列表,这叫做一个可迭代对象: >>> mylist = [1, 2, 3] >>> for i in myli ...

  6. cxf 相关问题

    cxf不能将String的参数序列化的问题解决 问题: java.lang.NoSuchMethodError: org.codehaus.jettison.AbstractXMLStreamWrit ...

  7. Git详解之Git分支

    Git 分支 几乎每一种版本控制系统都以某种形式支持分支.使用分支意味着你可以从开发主线上分离开来,然后在不影响主线的同时继续工作.在很多版本控制系统中,这是个昂贵的过程,常常需要创建一个源代码目录的 ...

  8. VirtualBox中安装CentOS-7问题说明

    之所以选择VirtualBox和CentOS,原因很简单. 目前我只有一台PC,用了几年了,性能很一般,我还需要用它做其他应用,不能直接装Linux,万一安装不成功,有可能一周内就完全没法学习了.以前 ...

  9. idea 项目添加web支持

    选中项目添加 add - web

  10. java 多线程 27 ：多线程组件之CountDownLatch

    前言 在多线程环境下,JDK给开发者提供了许多的组件供用户使用(主要在java.util.concurrent下),使得用户不需要再去关心在具体场景下要如何写出同时兼顾线程安全性与高效率的代码.之前讲 ...