问题描述：

在 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. Hibernate配置详细解释(转 )

    hibernate.cfg.xml <!--标准的XML文件的起始行,version='1.0'表明XML的版本,encoding='gb2312'表明XML文件的编码方式--> < ...

  2. ms12_004漏洞进行渗透

    环境: 攻击机:kail linux (IP:192.168.31.54) 目标机:winds 7 (IP:192.168.31.136) 1.启动metaspolit 2.输入命令search ms ...

  3. 呃，如何使 .NET 程序，在 64位 系统 中，以 32位 模式运行。

    其实最简单的方法就是在解决方案中,把平台设为 x86 就好了哈~   但是今天遇到一个第三方的软件,它调用的一个 dll 是 32位 的,可能它没有测试过在 64位 系统下运行的情况,它在编译时是按默 ...

  4. 【ARM】2440裸机系列－图片显示

    功能 LCD显示字汉字,字符和图片 说明 汉字,字符和图片需要用相应的取模软件得到相应的c文件,然后包含到工程中 主要代码   1)绘制背景 void Brush_ U32 c) { int x,y ...

  5. c++11并发机制

    传统意义上OS提供的并发机制包含进程和线程两个级别.考虑到实际复杂性,c++11仅提供了线程并发机制. c++11提供的线程并发机制主要位于四个头文件中:..... 线程并发机制包括线程管理.原子操作 ...

  6. Pythonic版二分查找

    [本文出自天外归云的博客园] 前提:升序数组,待查元素在数组中. 二分查找:就是一个递归函数c.待查元素a,当前数组中位数b,如果b=a则返回b的索引,b>a则在b左侧的子数组中调用函数c,否则 ...

  7. windows下html2jade批量转换

    将项目中的代码转换为jade,使用html2jade批量转换 @echo off SETLOCAL ENABLEDELAYEDEXPANSION for %%i in (*.html) do ( ht ...

  8. word中的域代码

    说明(2017-5-23 13:33:11): 1. Shift+F9显示域代码 2. Alt+F9显示全部域代码 3. Ctrl+F9添加一个域代码(一对大括号) 4. Ctrl+Shift+F9取 ...

  9. IOS 地图移动中心点获取

    MKMap显示地图后,如果用户移动了地图,自己定义的数据就需要刷新了,所以这个时候,中心点的经纬度就比较重要了. 本文演示如何获取经纬度 在MKMapViewDelegate里有个方法 - (void ...

  10. Java基础篇--字符串处理(StringBuffer)

    字符串处理 在Java中最常将字符串作为String类型对象来处理.同时String中也提供了很多操作字符串的函数(可自行查阅资料),而本篇将介绍StringBuffer如何操作字符串. String ...