IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者
首页 / 前端

IE6下position:absolute相邻元素margin-top失效的bug

WEB前端开发 2010-08-23 22:02:15 累计浏览 4,015 次
本机暂存
标签 CSS IE6 margin-top position:absolute

昨天发现了一个ie6的bug，绝对定义(position:absolute)的相邻元素margin-top竟然会失效；

看demo把（请用ie6围观）：http://www.css88.com/demo/absolute-bug/absolute-bug.html

这里有几个条件：

  1. 相邻元素是有width属性的，如果去掉width属性，margin-top又会生效，点击查看：http://www.css88.com/demo/absolute-bug/absolute-bug-1.html
  2. 增加相邻元素浮动，margin-top也会又会生效；点击查看：http://www.css88.com/demo/absolute-bug/absolute-bug-2.html

如果没有复杂的背景什么的可以使用padding-top替换margin-top；

还可应在相邻元素间插入一个空标签的方法：

以下是代码片段：

<div style="position: absolute; width: 500px; top: 0; left: 0; height: 30px; background-color: #666;">此处显示新 Div 标签的内容</div>
<!--[if IE 6]>
<div></div>
< ![endif]-->
<div style="margin-top: 35px; width: 100px; float: left; background-color: #3fc;">此处eeeeeeeee显示新 Div 标签的内容</div>

点击查看：http://www.css88.com/demo/absolute-bug/absolute-bug-4.html

――――――――――――――――
另赠送一个IE6下与float元素相邻的position:absolute元素消失BUG
围观地址：http://blog.dengsa.com/?p=342 http://www.webchina110.cn/?p=105

同分类推荐文章

  1. translateZ() （2026-06-25 21:18:56）
  2. translateY() （2026-06-25 21:17:56）
  3. translateX() （2026-06-25 21:16:01）

查看更多 前端 文章 →

建议继续学习

  1. 50个活力和动感的网页设计－颜色的灵感 （累计阅读 34,442）
  2. 视觉设计前瞻实用性研究（PNVD） 第二期 （累计阅读 12,977）
  3. 各公司对前端开发的职位描述 （累计阅读 10,405）
  4. iframe大小自适应 （累计阅读 10,057）
  5. 浏览器的渲染原理简介 （累计阅读 8,377）
  6. 解决IE6从Nginx服务器下载图片不Cache的Bug （累计阅读 8,357）
  7. 程序员眼里IE浏览器是什么样的 （累计阅读 8,011）
  8. 2010网页设计趋势 （累计阅读 7,818）
  9. Web前端工程师编程能力飞升之路 （累计阅读 7,691）
  10. 颜色的代码表达式 （累计阅读 7,665）