转: Firefox 浏览器对 TABLE 中绝对定位元素包含块的判定有错误
2014-03-20 16:55
387 查看
标准参考
元素的包含块
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 |
---|---|
可见,在 Firefox 中,AP 并没有依赖 A 来定位,而是依赖的 Container。因此,可以得知 AP 的包含块不是 A,而是 Container,Firefox 在这种情况下,并没有遵循标准,导致包含块判断错误。
解决方案
这是 Firefox 的一个 bug,绝对定位元素无法根据 'display' 特性是 'table' 且是绝对定位的祖先元素定位。为达到相同的效果可以改变元素的 containing block 或者改变元素的定位方式。为达到相同的效果,可以采用如下方式替代:
改变元素的 containing block:让绝对定位元素相对于 TABLE 元素的单元格定位,即,在 TD 上设置 'position:absolute' ;
改变元素的定位方式:把绝对定位元素的 'absolute' 改为 'relative' ,用相对定位。
相关文章推荐
- Firefox 浏览器对 TABLE 中绝对定位元素包含块的判定有错误,某些情况下会导致绝对定位元素位置跟其他浏览器中有差异
- Firefox/Safari/Chrome绝对定位元素重叠造成不可点击问题
- table中绝对定位元素相对td定位失效解决方案
- firefox下绝对定位元素重叠造成不可点击问题
- 在进行页面的DIV CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是“见机行事”。
- 获取定位元素相对于浏览器窗口的绝对位置
- js 获取元素标签的绝对定位位置
- CSS的三种手段让元素脱离标准本文档流——浮动、绝对定位、固定定位
- 解决ThinkPHP下使用上传插件Uploadify浏览器firefox报302错误的方法
- 绝对定位的元素在IE6下莫名丢失解决办法
- 绝对定位让元素居中
- 【CSS基础】绝对定位元素的水平居中 和 垂直居中
- 如何借助浏览器Console使用Js进行定位和操作元素
- ie6绝对定位的块会被select元素遮挡的解决方案
- 当子级元素浮动时让父级元素高度自适应的三种方法(以及多个子集元素同时存在浮动和绝对定位时的问题的解决办法)
- 绝对定位的元素怎么居中显示
- css基础 绝对定位 position:absolute 相对于定位的祖先元素进行定位
- firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
- IE、Firefox使用绝对定位(absolote) 网页居中布局 支持IE7,8,FF
- HH8001: 在 Firefox 中注释内容中如果包含 '-' 字符在某些情况下会使该注释解析错误