IE6下面 position:absolute 失效导致绝对定位层不显示的原因 -

IE6下面 position:absolute 失效导致绝对定位层不显示的原因

作者：MJ 发布于：2012-9-6 5:01 Thursday 分类：Css

今天早上重构一个机票订购页面的时候，为了配合JS特效所以需要写一个绝对定位浮动层，写完在测试的时候发现，在FF、ie8、ie7、op下都可以正常显示，可是到了IE6的时候，这个绝对定位浮动层却无法显示，把CSS中“position:absolute”去掉后就可以显示出来，这是何原因呢？

经过baidu、goole折腾研究了半天后终于找到了原因，原来是这个绝对定位浮动层旁边紧邻的那个div层是个使用“float:left”左浮动，而导致这个绝对定位浮动层在IE6下无法显示，解决办法就是在这个绝对定位浮动层前面插入一个清除浮动的层。

总结：在IE6下面 position:absolute的绝对定位层前面紧邻的那个层如果有用到“float” css浮动属性会导致这个绝对定位层无法显示。请看下面两个对比案例演示。

1、这个是前面没有清除浮动层，绝对定位层无法显示的演示

<!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" />
<title>MJBlog(mj.588cy.com)</title>
<style type="text/css">
.ck_list_lb{ width:98px; height:20px; border:1px solid #bababa; display:block; margin-left:4px; float:left; background:url(http://mj.588cy.com/img/bg_mj.png) no-repeat right -620px; position:relative;color:#555555; font-size:12px;}
.ck_list_lb input{ color:#555555;}
.ck_input_b{ width:70px; float:left; border:0px; height:20px;padding:0px 0px 0px 2px; _height:17px; _padding:3px 0px 0px 0px; overflow:hidden;}
.span_lb{ width:22px; height:20px; float:left;}
.span_fd{ width:98px; height:auto; border-width:0px 1px 1px 1px; border-style:solid; border-color:#bababa; position:absolute; left:-1px; top:21px;}
.span_fd a{ width:92px; height:20px; line-height:20px; padding:2px 3px; display:block; cursor:pointer; text-decoration:none; color:#555555;}
.span_fd a:hover{ background-color:#0066CC; color:#FFFFFF;}
.ck_input_a{ width:100px; height:20px; float:left; border:1px solid #bababa; padding:0px 2px; _height:17px; _padding:3px 2px 0px 2px;}
.clear { diplay: block; clear: both; height:0px; font-size: 0; line-height: 0; margin:0px; padding:0px;}
</style>
</head>

<body>
<input name="" type="text" class="ck_input_a" />
<span class="ck_list_lb">
<input name="" type="text" class="ck_input_b" value="成人(>12岁)" />
<div class="span_lb"></div>
<div class="span_fd"><a href="#">成人(>12岁)</a><a href="#">儿童(2-12岁)</a></div>
</span>
</body>
</html>

2、这个是前面有清除浮动层，绝对定位层正常显示的演示

<!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" />
<title>MJBlog(mj.588cy.com)</title>
<style type="text/css">
.ck_list_lb{ width:98px; height:20px; border:1px solid #bababa; display:block; margin-left:4px; float:left; background:url(http://mj.588cy.com/img/bg_mj.png) no-repeat right -620px; position:relative;color:#555555; font-size:12px;}
.ck_list_lb input{ color:#555555;}
.ck_input_b{ width:70px; float:left; border:0px; height:20px;padding:0px 0px 0px 2px; _height:17px; _padding:3px 0px 0px 0px; overflow:hidden;}
.span_lb{ width:22px; height:20px; float:left;}
.span_fd{ width:98px; height:auto; border-width:0px 1px 1px 1px; border-style:solid; border-color:#bababa; position:absolute; left:-1px; top:21px;}
.span_fd a{ width:92px; height:20px; line-height:20px; padding:2px 3px; display:block; cursor:pointer; text-decoration:none; color:#555555;}
.span_fd a:hover{ background-color:#0066CC; color:#FFFFFF;}
.ck_input_a{ width:100px; height:20px; float:left; border:1px solid #bababa; padding:0px 2px; _height:17px; _padding:3px 2px 0px 2px;}
.clear { diplay: block; clear: both; height:0px; font-size: 0; line-height: 0; margin:0px; padding:0px;}
</style>
</head>

<body>
<input name="" type="text" class="ck_input_a" />
<span class="ck_list_lb">
<input name="" type="text" class="ck_input_b" value="成人(>12岁)" />
<div class="span_lb"></div>
<div class="clear"></div>
<div class="span_fd"><a href="#">成人(>12岁)</a><a href="#">儿童(2-12岁)</a></div>
</span>
</body>
</html>

标签: 绝对定位 position:absolute

« JQuery 增加、删除表格div层文本内容的JS代码 | Jquery 淘宝商城鼠标经过整个区域图片变暗变亮的JS代码»

发表评论：

blogger
分类
- MJ分享(5)
- JQuery(23)
- Css(16)
- Html5(1)
- PHP(20)
- Seo优化(3)
最新碎语
- 佛曰：命由己造，相由心生，世间万物皆是化相，心不动，万物皆不动，心不变，万物皆不变。
  2012-10-24 02:01
- 佛曰：人生有八苦：生、老、病、死，爱别离，怨长久，求不得，放不下！
  2012-10-24 01:59
- 佛曰：笑着面对，不去埋怨。悠然，随心，随性，随缘。注定让一生改变的，只在百年后，那一朵花开的时间。
  2012-10-24 01:56
- 裤子尺码：腰围29（2.23尺/75-76cm）前档24-25cm 大腿48-50cm 小腿32-33cm 裤长95cm
  2012-10-17 15:49
- WEB前端工程师：我们是工程师中的设计师，是设计师中的工程师。
  2012-09-02 15:34
搜索
随机日志
链接

IE6下面 position:absolute 失效导致绝对定位层不显示的原因

blogger

分类

最新碎语

搜索

随机日志

链接