问题描述：

在 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. MySQL update 语句与标准SQL不同的地方

    [SQL标准中有一个叫同时执行的概念] 同时执行指的是在同一个子句中的各个部分的执行时机是不区分先后的,如下面的SQL语句 ),); +---------+--------+ ) ) | +----- ...

  2. 更新django到2.x

    django-2.x 已经发布了.想体验一下它的新功能.于是把之前电脑上的django-1.11.7uninstall 掉 一.卸载django-1.11.7: pip3 uninstall djan ...

  3. lnmp 一键安装

    系统需求: CentOS/RHEL/Fedora/Debian/Ubuntu/Raspbian/Deepin Server/Aliyun/Amazon/Mint Linux发行版 需要5GB以上硬盘剩 ...

  4. collections集合的总括。

    序言 突然遇到集合的有关面试题,感觉很懵逼,所以特意总结了一下,关于我们常用的 ArrayList.LinkedList.Set等集合的一些区别和用法. 还有,这份微小型总结肯定是从很多博文中摘取精华 ...

  5. angular五种服务详解

    在这之前angular学习笔记(十五)-module里的'服务'这篇文章里,已经大致讲解了ng中的'服务',在之后的很多地方也用到了服务,但是,所有的服务都是使用app.factory来创建的.但其实 ...

  6. MyBatis 问题列表

    问题表现:The content of elements must consist of well-formed character data or markup 解决办法:1.配置的动态SQL语句里 ...

  7. SpringBoot启动和停止脚步

    1.start.sh # start.sh 启动项目 #!/bin/sh file="/123/springcloud/admin.jar" if [ -f "$file ...

  8. Linux环境变量相关总结

    Linux下环境变量分为全局和局部变量两种. Linux 下通常提供三种工具可以可以查看环境变量:printenv.env.set.前两个可以查看全局环境变量,最后一个会打印包含全局和局部环境变量. ...

  9. c与c++相互调用机制分析与实现

    c++通常被称为Better c,多数是因为c++程序可以很简单的调用c函数,语法上基本实现兼容.最常用的调用方式就是c++模块调用c实现的dll导出函数,很简单的用法,使用extern " ...

  10. Mysql查看连接数相关信息

    MySQL查看连接数相关信息在 数据库:INFORMATION_SCHEMA 表:PROCESSLIST 表结构如下: mysql> desc PROCESSLIST; +---------+- ...