揭秘CSS(第 1 版)
10.4.5 相对容器中绝对定位Bug
阅读(

概述

CSS选择器

字体和文本

盒模型

元素的定位

链接和导航

表格和表单

变换、过渡和动画

布局

解决跨浏览器问题

渐进增强与优雅降级

兼容浏览器的方法

IE的hasLayout

修复IE的常见BUG

列表 li 底部空行Bug

列表 li 的阶梯Bug

文本3像素偏移Bug

浮动元素双倍边距Bug

相对容器中绝对定位Bug

在页面布局中,将绝对定位的元素嵌套在相对定位的容器中,是一种很常见的布局。假设有两个元素,#outter 为父元素,#inner 为子元素:

<div id="outter">
    <div id="inner"></div>
</div>

如果让父元素使用相对定位,子元素使用绝对定位,在 IE6 及更低版本中,它会有很多问题。最常见的问题有两个:一个问题是,当父元素的宽度为奇数时,子元素的 right 偏移值会错位;另一个问题是,当为父元素设置 padding 后,子元素的偏移起点位置错误。

先看看第一个问题,我们让父元素 width 属性的值是一个奇数,并通过 top 和 right 属性设置子元素的偏移:

#outter {
    width: 205px;
    height: 80px;
    position: relative;
}
#inner {
    width: 100px;
    height: 60px;
    top: 0;
    right: 0;
    position: absolute;
}

正常情况下,子元素的顶部紧贴父元素的底部、右侧紧贴父元素的右侧。在现代浏览器中的运行效果如图 10‑10 所示:

现代浏览器中的运行效果
图10-10 现代浏览器中的运行效果

而在IE6中,子元素的右侧并没有紧贴父元素的右侧,而是向右偏移了 1px,得到的结果似乎是 right: 1px 的效果。运行效果如图 10‑11 所示:

IE6中的运行效果
图10-11 IE6中的运行效果

究其原因,这是由于相对定位父元素的宽度为奇数所致,如果把宽度设置为偶数,问题就不会出现。

再来看第二个问题,为了方便查看效果,为父元素设置 30px 宽的边框,并为子元素设置宽度、高度、及 1px 的虚线边框:

#outter {
    padding: 20px;
    position: relative;
    border: 30px solid #ccc;
}
#inner {
    top: 0;
    left: 0;
    width: 100px;
    height: 20px;
    position: absolute;
    border: 1px dashed #f00;
}

正常情况下,绝对定位元素的偏移,是相对于其包含块边框的内边缘,即父元素 #outter 边框的内边缘。在现代浏览器中的运行结果如图 10‑12 所示:

现代浏览器中的运行效果
图10-12 现代浏览器中的运行效果

而在IE6及更低版本中,top 的偏移是相对于其包含块边框的外边缘,left 的偏移是相对于其包含块 padding-box 的外边缘。运行结果如图 10‑13 所示:

IE6中的运行效果
图10-13 IE6中的运行效果

这个问题的原因,是相对定位的父元素没有触发布局,为了使IE6及更低版本中表现正确。可以为父元素显式设置宽度、或高度、或 zoom: 1,迫使父元素触发布局,使绝对定位子元素回到正确的位置。

但很多时候,根本无法给父元素指定一个合适的宽度和高度值,而 zoom: 1 又会导致父元素的 padding 失效。

因此,解决这个问题最好的办法,就是使用IE hack,把绝对定位子元素的 top 设置为父元素 border-top 的宽度,把 left 设置为等于父元素 padding-left 的负值。如:

#inner {
    …
    _top: 30px;
    _left: -20px;
}

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验