标准参考

元素的包含块

W3C CSS2.1 规范中规定,绝对定位元素的包含块(containing block),由离它最近的 position 特性值是 "absolute"、"fixed"、"relative" 之一的祖先元素组成;如果这个祖先元素不存在,则包含块由根元素组成。

绝对定位元素的定位

绝对定位元素的定位,依赖于其包含块。也就是说,当绝对定位元素的 "top"、"left" 值被设置之后,绝对定位元素会根据这两个值,相对于包含块产生位移。

根元素

在文档树中,每一个节点都会有唯一的一个父节点,而根元素例外,它处于文档树的最顶端,没有父节点。

关于根元素的详细资料,请参考 CSS2.1 规范 http://www.w3.org/TR/CSS2/conform.html#root 中的内容。

关于包含块的详细资料,请参考 CSS2.1 规范 10.1 Definition of "containing block" 中的内容。

问题描述

Firefox 浏览器对 TABLE 中绝对定位元素包含块的判定有错误,可能会导致绝对定位元素位置跟其他浏览器中有差异。

造成的影响

1. 绝对定位元素的位置

根据 W3C 标准,绝对定位元素的位置跟它的包含块有关。所以,当它处于一个非 static 定位的 TABLE 元素中时,Firefox 和其他浏览器对元素包含块判定不同,因此,对于相同的 top 和 left 值,Firefox 与其他浏览器中绝对元素的位置可能会不同。

2. 绝对定位元素的宽度计算规则

根据 W3C 标准,如果绝对定位元素的宽度没有设置或被设置为 "auto",那么此元素的宽度计算应该采用 shrink-to-fit 的算法,在算法中,需要计算元素的 available width,而 available width 就是元素包含块的宽度,所以,Firefox 中,在这种情况下,会导致绝对定位元素宽度与其他浏览器中不同。

受影响的浏览器

Firefox 对 TABLE 中绝对定位元素包含块的判定有错误。

问题分析

在 Firefox 中,绝对定位元素的包含块的 'display' 特性是 'table' 且是绝对定位,则绝对定位元素对包含块判断的有错误。

分析以下代码:

<div id="Container" style="width:200px; height:200px; position:absolute; background-color:silver;">Container
<div id="A" style="display:table; position:absolute; width:100px; height:100px; top:100px; left:100px; background-color:green;">TABLE
<div id="AP" style=" position:absolute; width:50px; height:50px; top:50px; left:50px; background-color: gold;">
TEXT
</div>
</div>
</div>
  • Container 是 200px*200px 的绝对定位元素。
  • A 是一个绝对定位的 DIV 元素( 'display:table' ),top 和 left 都是 100px。
  • AP 是一个绝对定位的 DIV 元素,它的 top 和 left 都是 50px。

根据 W3C 标准, A 应该相对于 Container 向下向右位移 100px,A 本身的尺寸是100px*100px,所以 A 应该位于 Container 的右下角;同理,AP 应该相对于A 向下向右位50px,位于 A 的右下角。

这段代码在不同的浏览器环境中表现如下:

Firefox IE Opera Safari Chrome

将 DIV 换成一个 TABLE 元素,或者,把 DIV 的 ’display' 属性设置成 'inline-table', 效果相同。

可见,在 Firefox 中,AP 并没有依赖 A 来定位,而是依赖的 Container。因此,可以得知 AP 的包含块不是 A,而是 Container,Firefox 在这种情况下,并没有遵循标准,导致包含块判断错误。

解决方案

这是 Firefox 的一个 bug,绝对定位元素无法根据 'display' 特性是 'table' 且是绝对定位的祖先元素定位。为达到相同的效果可以改变元素的 containing block 或者改变元素的定位方式。

为达到相同的效果,可以采用如下方式替代:

  • 改变元素的 containing block:让绝对定位元素相对于 TABLE 元素的单元格定位,即,在 TD 上设置 'position:absolute' ;
  • 改变元素的定位方式:把绝对定位元素的 'absolute' 改为 'relative' ,用相对定位。

转: Firefox 浏览器对 TABLE 中绝对定位元素包含块的判定有错误的更多相关文章

  1. table中绝对定位元素相对td定位失效解决方案

    开门见山! 问题:在一个table中,我需要在td里面绝对定位一个div, 写法:td{position:relative;} div{position:absolute;} OK,就这么简单,思路也 ...

  2. 仅Firefox中A元素包含Select时点击Select不能选择option

    这是在使用京东的一个日期组件时碰到的bug,重现bug的代码精简如下 <!DOCTYPE HTML> <html> <head> <title> 仅Fi ...

  3. IE7中绝对定位元素之间的遮盖问题

    由于页面复杂就不上现实例子,举例说明. 两个同层级<div>元素,都设置了 position: relative;相对定位. 他们的内部的元素(不管什么元素了)都设置了position: ...

  4. jq一行一行循环读取table中的元素

    获取当前tr行号,可依据index 获取当前tr对象 获取某一tr下td的内容

  5. javascript中的元素包含判断

    在实际开发中,很多时候需要知道某个节点是不是另一个节点的后代.很多浏览器提供了contains方法,如: console.log(document.documentElement.contains(d ...

  6. css中margin重叠和一些相关概念(包含块containing block、块级格式化上下文BFC、不可替换元素 non-replaced element、匿名盒Anonymous boxes )

    平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外 ...

  7. CSS中包含块原理解析

    CSS包含块原理解析 确定CSS中的包含块也确定就是元素的父元素.关键是:看元素是如何定位的.确定包含块很重要,比如设置百分比.另外也可以进行样式的继承等等. 分两个情况: 相对定位和静态定位 静态定 ...

  8. table中bordercolor属性设置后最新ie浏览器或firefox中不显示边线,借助table的css来实现边线

    table中的bordercolor属性设置后在最新的ie或者firefox中均不显示边线,table的边线又是常用功能.只能使用css来实现了,更通用,更方便一些. css: ​.ctable{ b ...

  9. 逆天的IE7中,绝对定位元素之间的遮盖问题

    个人比较支持IE9以上的版本,认为他们的样式和效果都是比较人性化的,不过很多时候还是不得不考虑其他版本浏览器的感受,这里IE6就不用考虑他了,这货简直就是IT史上的奇葩,这里要说一个IE7的绝对定位和 ...

随机推荐

  1. photoshop自动切图

    自动切图 前面的话 随着photoshop版本的不断升级,软件本身增加了很多新的功能,也为切图工作增加了很多的便利.photoshop最新的版本新增了自动切图功能,本文将详细介绍photoshop的这 ...

  2. my.ini配置

    在家里写点东西,需要配置mysql windows版本,linux版本我一般都是直接编译后,有模板文件可以编辑,新下载的5.6没有,我用的是zip的. 在网上找了两篇博客,写的很详细: http:// ...

  3. Liunx 环境下vsftpd的三种实现方法(超详细参数)

    以下文章介绍Liunx 环境下vsftpd的三种实现方法 ftp://vsftpd.beasts.org/users/cevans/vsftpd-2.0.3.tar.gz,目前已经到2.0.3版本.假 ...

  4. c++复习(未完待续)

    1.使函数不能在定义该函数的文件之外访问的方法: (1)声明函数为static(2)将函数放到无名名字空间中 namespace { void g() { ......... } }

  5. 过拟合/欠拟合&logistic回归等总结(Ng第二课)

    昨天学习完了Ng的第二课,总结如下: 过拟合:欠拟合: 参数学习算法:非参数学习算法 局部加权回归 KD tree 最小二乘 中心极限定律 感知器算法 sigmod函数 梯度下降/梯度上升 二元分类 ...

  6. hdoj 5249 KPI(treap)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5249 思路分析:使用queue记录管道中的值并使用treap能够查询第K大的功能查询第floor(m/ ...

  7. Linux系统服务 1 ---- rSyslog日志服务

    1 日志 1 日志是系统用来记录系统运行时候的一些相关的信息的纯文本文件 2 日志的目的是保存相关程序的运行状态,错误信息等.为了对系统进行分析,保存历史记录以及在出现错误的时候发现分析错误使用 3 ...

  8. Java对象序列化与反序列化一 JSON

    Java对象序列化与反序列化一 JSON 1. 依赖库 jackson-all-1.6.1.jar 2. 代码 public class Student {    private String nam ...

  9. Qt编写文件一键命名软件

    之所以会写这篇博文,主要是由于近期从网上下载了一堆图片,但图片名称非常没有规律,处理起来非常不方便,由此想到是不是有一键命名的软件能够帮助我对全部图片命名,是图片名称有规律,这样在处理时方便操作. 有 ...

  10. js中new构造函数的研究

    <javascript高级编程>里对new操作符的解释: new操作符会让构造函数产生如下变化: 1.       创建一个新对象: 2.       将构造函数的作用域赋给新对象(因此t ...