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

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

CSS样式表: 未知长宽元素在已知300px*300px的容器中垂直居中（IE6/7/8/FF）; CSS dashed和dotted的区别; css 超过宽度的文字显示点点; 不同浏览器对CSS3和HTML5的支持状况; 使用DIV+CSS布局网站的优点和缺陷分析; CSS样式表中的position属性详细说明; css 圆角边框; CSS 网页布局问题 li上多出的margin问题; 为什么有些css样式不起作用; tab选项卡布局之利用a的一个选项形式; UL、LI 无序列表实现纯CSS网站导航菜单; 在IE下，当margin:0 auto;无法使得块级元素水平居中时; IE bug input 外层浮动的边距问题; 重置浏览器默认样式; 两种跨浏览器的自适应高的css代码; 纯CSS无hacks的跨游览器自适应高度多列布局推荐; IE中伪类hover的使用及BUG; img与容器下边界的空隙（缝隙）的解决方法; CSS入门篇之传智播客学习; CSS3 倾斜的网页图片库实例教程

No. « ‹ 106 107 108 109 › »

技术文章搜索

关键字

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

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

收藏到网摘: 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错位的绝对定位元素