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

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

CSS样式表: 什么叫标准网页设计?; 什么是XHTML?; 巧妙的最大化动态载入IFrame的方法; 为什么要建立web标准与web标准的好处; 创建无表格网站的原因和原则译文; 一个新的CSS菜单代码; 客齐集OEM的CSS解析与开发经验; 页里面 CDATA的作用说明; ie中多id的调用方法; CSS设置网页的字体防浏览器浏览页面字体变形; 用css来控制图片大小显示的实现方法与代码; CSS入门教程篇; CSS选择符说明; IE和FIREFOX下CSS的区别与解决方法; 用CSS让表格返转的代码 IE only; 做网页经常要注意的常识整理收集; div+css实现的滑动门,简洁,新手上路 (小鸽子系列); css滤镜属性语法介绍; 百分比的细节－－容器大小篇; 你不一定知道的Label的For用法

No. « ‹ 37 38 39 40 › »

技术文章搜索

关键字

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

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

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