问题描述：

在 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. Mac下 如何配置虚拟机软件Parallel Desktop--超详细

    Mac下 如何配置虚拟机软件Pparallel Desktop--超详细 Mac 的双系统解决方案有两种,一种是使用Boot Camp分区安装独立的Windows,一种是通过安装Parallels D ...

  2. unity, 2d rope

    https://www.youtube.com/watch?v=l6awvCT29yU

  3. javaweb可部署目录结构

    webApp //项目名称 -META-INF --MANIFEST.MF -WEB-INF --classes   //编译class文件 --lib  //依赖jar --web.xml -ind ...

  4. 安装/移除 MySQL 服务

    MySQL Community Server 下载:https://dev.mysql.com/downloads/mysql/ 以下内容使用的版本为:mysql-5.7.17-win32.zip 1 ...

  5. Android 源码解析:单例模式-通过容器实现单例模式-懒加载方式

    本文分析了 Android 系统服务通过容器实现单例,确保系统服务的全局唯一. 开发过 Android 的用户肯定都用过这句代码,主要作用是把布局文件 XML 加载到系统中,转换为 Android 的 ...

  6. 802.11ax前瞻4：802.11ax与HiperLan

    序言 在早期wi-fi发展过程中,欧洲还出现过一个同期的无线局域网协议.HiperLan .所谓网络发展始终是"分久必合.合久必分".不管是有线网络当前SDN的引入.还是无线网络下 ...

  7. 服务端 https和SSL

    String keyStoreFilePassword = System .getProperty("keystore.file.password"); /usr/java/jdk ...

  8. Atitti dbutil获取多个返回结果集的解决

    Atitti dbutil获取多个返回结果集的解决 1.1. 多个select默认只返回第一个resultset1 1.2. 调用存储过程,也是返回第一个select的1 1.3. 如果insert前 ...

  9. bit,Byte,Word,DWORD（DOUBLE WORD,DW）

    1个二进制位称为1个bit,8个二进制位称为1个Byte,也就是1个字节(8位),2个字节就是1个Word(1个字,16位),则DWORD(DOUBLE WORD)就是双字的意思,两个字(4个字节/3 ...

  10. 【Linux技术】磁盘的物理组织，深入理解文件系统

    磁盘即是硬盘,由许多块盘片(盘面)组成,每个盘片的上下两面都涂有磁粉,磁化后可以存储信息数据.每个盘片的上下两面都安装有磁头,磁头被安装在梳状的可以做直线运动的小车上以便寻道,每个盘面被格式化成有若干 ...