FireFox正常 IE错位的绝对定位元素- CSS样式表

当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > FireFox正常 IE错位的绝对定位元素

CSS样式表: 脚本控制三行三列自适应高度DIV布局; 通过CSS Hack 区分 FF/IE7/IE6/IE5.5/IE5 代码推荐; HTML/XHTML模板; 用DIV+CSS写小三角; SPAN元素和DIV元素有的区别; 关于Firefox中的Flash不可以显示透明效果的问题; 当ie7不认!important之后 [布局的解决办法]; 绝对定位的DIV宽度自动适应的一个方法; 被人遗忘的html tags; 一个css 的小问题; IE 5.x/Win 和模型bug; [转]目前找到的最好的Iframe自适应高度代码; Web Safe Color Pallette; 网站制作之网页技巧; http状态码一览表; 从Table向Css过渡的优缺点比较; 不用float实现div模块居中布局; 解决列高度自适应(相同)的五种方法; 用CSS floats创建三栏页布局; 如何正确使用标题元素、段落和强制换行

No. « ‹ 34 35 36 37 › »

技术文章搜索

关键字

CSS样式表中的 FireFox正常 IE错位的绝对定位元素

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-27 浏览: 275 ::

收藏到网摘: n/a

CSS 3D立方体制作 CSS 避免使用滤镜

IE 一如既往地带来问题。真的，我觉得 IE 坚持自己的一套无所谓，不支持或者不完全支持标准也无所谓。但是，IE6 IE7 IE8 这三个版本都有各自不同的表现，实在是太让人难受了。

前两天碰到了这个奇怪的问题：

绝对定位的元素，紧邻着两个浮动元素。Firefox 中一切正常，IE6 中绝对定位元素消失了。

解决方法：只要别让绝对定位元素紧邻浮动元素就可以了。比如可以在绝对定位元素后面加个空元素。当然，这个空元素是毫无意义的，但是，在 IE 面前，又能怎么样呢？

demo1

经过实验，我发现，只要浮动元素的宽度不填满父元素，绝对定位元素就能正常显示，一旦浮动元素的宽度填满父元素，绝对定位元素就会消失。而且，看来，父元素宽度是这种情况发生的临界点。

demo2

另外，这个 demo 里面也存在 IE6 的另一个经典 bug : 由注释产生的表现不同。(唉，bug 都成经典了，IE 无敌啊。

请看上面的图中，上面那块，就是有注释的，下面那块是去掉注释的，可以明显的看到底部的白色空白高度是不同的。

看具体演示效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css">
/*common*/
*{margin:0;padding:0;list-style:none;}
select,input{font-size:12px;}
img{border:0;display:block;margin:0 auto;}
a{color:#333;text-decoration:none;}
a:hover{color:#c42805;text-decoration:underline;}
em{font-style:normal;color:#c42805;}
em a{color:#c42805;}
body{font-size:12px;color:#333;font-family:Arial,"宋体";background-color:#9c9c9c;}
.clear{clear:both;}
/*wrap*/
.wrap{padding:20px 0;}
p{text-align:center;font-size:14px;font-weight:bold;}
/*content*/
.content{width:480px;margin:20px auto;background-color:#fff;padding:10px;overflow:hidden;position:relative;}
.absolute{width:280px;background-color:#ddd;padding:10px;text-align:center;position:absolute;right:5px;top:5px;}
.main,.sub{float:left;width:240px;height:150px;line-height:150px;text-align:center;}
.main{background-color:#ccc;}
.sub{background-color:#c2c2c2;}
.mainsub{float:left;width:480px;text-align:center;height:150px;line-height:150px;background-color:#ccc;}
</style>
<title>Template</title>
</head>
<body>
<div class="wrap">
<p>修正前</p>
<div class="content">
<div class="absolute">
绝对定位元素
</div>
<div class="main">
浮动元素
</div>
<div class="sub">
浮动元素
</div>
</div>
<p>修正后</p>
<div class="content">
<div class="absolute">
绝对定位元素
</div>
<div></div>
<div class="main">
浮动元素
</div>
<div class="sub">
浮动元素
</div>
</div>
<p>浮动元素宽度小于父元素</p>
<div class="content">
<div class="absolute">
绝对定位元素
</div>
<div class="main">
浮动元素
</div>
</div>
<p>浮动元素宽度大于或等于父元素</p>
<div class="content">
<div class="absolute">
绝对定位元素
</div>
<div class="mainsub">
浮动元素
</div>
</div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

CSS 3D立方体制作 CSS 避免使用滤镜

CSS样式表 中的 FireFox正常 IE错位的绝对定位元素

评论 (0) All

CSS样式表中的 FireFox正常 IE错位的绝对定位元素