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

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

CSS样式表: CSS网页布局; 知道吗？H1标签同样也可以美化; CSS:用overflow代替left截取指定长度字符串; 学习CSS了解单位em和px的区别; 巧用CSS滤镜制作绚丽图片播放效果; PDF、ZIP、DOC链接的标注(CSS技巧); DIV CSS制作网页时易犯的错误总结; CSS隐藏网页文字的几种常用方法; 总结新手学CSS容易出现错误的内容; 网站配色,CSS主色调配色方案; 我们需要对CSS进行缩写的原因; 从三方面加速CSS样式作用网页速度; CSS属性选择器的四种格式; CSS教程:text-indent隐藏文字出现虚线框outline; 表单name与id的区别和相似之处; CSS让网页里的提交按钮变得更漂亮; 小技巧:网页制作中段落缩进的方法; 网页导航上用CSS标志当前页效果; CSS框架的利与弊（上）; Web标准:关于DOCTYPE

No. « ‹ 7 8 9 10 › »

技术文章搜索

关键字

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

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

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