【分享】Firefox中table元素的绝对定位子元素包含块判定错误的bug

WebAdvocate 2010-07-22 04:25:35
加精
关于绝对定位元素的定位,依赖于其包含块。也就是说,当绝对定位元素的"top"、"left"值被设置之后,绝对定位元素会根据这两个值,相对于其包含块产生位移。见:http://www.w3.org/TR/CSS2/visuren.html#absolute-positioning

关于包含块的概念,在帖子:【分享】说说标准 -- 可视化格式模型(visual formatting model)之一 -- 包含块(containing block)已经做了详细的说明,其中,W3C CSS2.1规范中规定,绝对定位元素的包含块(containing block),由离它最近的position特性值是"absolute"、"fixed"、"relative"之一的祖先元素组成;如果这个祖先元素不存在,则包含块是初始包含块。

但是,这个规则在Firefox里好像不大管用。

本来想做一个很华丽丽的效果,需要把一个绚丽的图片针对表格的左上角定位,,本来在其他浏览器中好好的,但是到Firefox中就不灵了……


<div style="width:200px; height:200px; position:absolute; background-color:silver;">
<table style="position:absolute; width:100px; height:100px; top:100px; left:100px; background-color:green;">
<tr>
<td>
<div style="position:absolute; width:50px; height:50px; top:50px; left:50px; background-color: gold;">
TEXT
</div>
</td>
</tr>
</table>
</div>
本来是要想让金色的绝对定位 DIV 相对于 TABLE 来定位,但事与愿违,在 Firefox 里,变成了这样:

金色的 DIV 没有相对于绿色 TABLE 的左上角定位,跑偏了,相对于灰色的 DIV 定位了,当TABLE 不存在,哈!

其他浏览器中,就这样子:

可见,在Firefox中,TABLE 中好像创建不了包含块。
所以,在Firefox里,绝对定位元素的包含块是"position"特性值为"absolute"、"fixed"、"relative"之一的非table类型的祖先元素。定位的时候,也就会出现意想不到的效果。

这个问题,还可能会影响绝对定位元素的自动宽度计算。

所以,想相对于 TABLE 元素定位的同学小心了。


更多兼容性问题:【分享】浏览器兼容性问题目录




...全文
3134 92 打赏 收藏 转发到动态 举报
写回复
用AI写文章
92 条回复
切换为时间正序
请发表友善的回复…
发表回复
tonwely_1984 2010-07-30
  • 打赏
  • 举报
回复
碰到过些类问题,但是没有找到原因,每次都放弃了把表格设置position特性来定位。。。
mochimo 2010-07-30
  • 打赏
  • 举报
回复

<div style="width:200px; height:200px; position:absolute; background-color:silver;">
<div style="display:table;position:absolute; width:100px; height:100px; top:100px; left:100px; background-color:green;">
<div style="display:table-row">
<div style="display:table-cell;background:red;">
<div style="position:absolute; width:50px; top:0px; left:0px; height:50px; background-color: gold;">
TEXT
</div>
</div>
</div>
</div>
</div>


在支持display:table 系列的浏览器上看,完全证实楼主说的是对的~~
mochimo 2010-07-30
  • 打赏
  • 举报
回复
[Quote=引用 80 楼 theforever 的回复:]
无论是IE,还是FF,真正的BUG只是少数,更多的差异,是他们的匠心所至.若不理解其苦心,反动不动就说是BUG,实在也是不尊重别人的劳动和用心
[/Quote]

80楼的就是上帝造的大象,JJ张在脸上,我们都很理解上帝的匠心所致,尊重他老人家的劳动。
mochimo 2010-07-30
  • 打赏
  • 举报
回复
[Quote=引用 80 楼 theforever 的回复:]
  无论是IE,还是FF,真正的BUG只是少数,更多的差异,是他们的匠心所至.若不理解其苦心,反动不动就说是BUG,实在也是不尊重别人的劳动和用心.
[/Quote]

你说的这个仅停留在浏览器的应用层bug定义上。
其实楼主说的很白了,他的bug定义是以 css 规范为参照,指出的是各个浏览器内渲染引擎实现方面的bug,是内核层级的,比你说的深多了。
DinoSun 2010-07-30
  • 打赏
  • 举报
回复
呵呵,此帖最大亮点是楼上的楼上的楼上两贴。

也许楼主把所有的“bug”都替换为“差异”才能保证自己说的都是“正确”的。
又或许干脆和一些隐居在民间的高手一样,来个“羚羊挂角”,让人无迹可寻,阿弥陀佛,不可说不可说……

“bug”的确很难界定,有无相生,难易相成,那谁和“bug”呼应呢?造成 Crash 的代码?考虑不周导致的意料之外的问题?又或是选择性忽略的问题?

不同角色的人对“bug”的敏感程度不同,用户把它当作一个标签,认为不符合常理的现象就是“bug”。开发者把“bug”看作一个危险讯号,认为在代码级别的意料之外,才算是“bug”。

记得曾有过“IE盒模型Bug”的说法,这个就是广大用户从自己取的名字,而不是微软官方的称谓。但这并不妨碍大家理解这个问题。

当然,当然为了避免误导读者或者产生其他不必要的歧义,楼主的确可以少用“bug”这类字眼。

比如去餐厅,服务员上来了水,你一喝,tmd,怎么是牙膏味,想吐,于是扔在一边不再喝。
然后你和其他朋友说“我去了家饭馆,他家的水是tm牙膏味,我喝的想吐。”
或者说“我去了家饭馆,他家的水很有特色,嗯,和其他饭馆的味道有差异。”

前者太主观了,后者更加负责。
也许这个餐厅的水是纳米抗菌远红外RNA螺旋藻的薄荷水,对健康有好处呢……

不知各位喜欢那种说法?

PS: 看了楼主很多文章,受益匪浅,大家也看得出来,这贴是专门的挺一下楼主,呵呵。
mochimo 2010-07-30
  • 打赏
  • 举报
回复
[Quote=引用 80 楼 theforever 的回复:]
作为FF,把display:table的元素作为内容处理,可以简化和清晰控制结构,也是很合理的.
[/Quote]

一看这话就不对,什么叫做“作为FF,把display:table的元素作为内容处理,可以简化和清晰控制结构,也是很合理的”?

元素作为内容处理?还可以可以简化和清晰控制结构?还合理?

table element == content 就是查遍了你说的"FF产品说明书"里也没把这这两词这么联系的,看内意思您是"熟读说明书"都扩展概念了.
mochimo 2010-07-30
  • 打赏
  • 举报
回复
[Quote=引用 80 楼 theforever 的回复:]
  我在楼主的很多帖子里都说过,BUG不是随便可以说的.问题在于你是否先弄明白了这款产品的使用说明书.
不同的产品,对于细节的处理,有各自的观念和定义.那是它的规矩,你要用,就必须遵循.
[/Quote]
给你FF产品说明书:
https://developer.mozilla.org/en/CSS/position
absolute
Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor or to the containing block. Absolutely positioned boxes can have margins, they do not collapse with any other margins.

给你css标准说明书:
http://www.w3.org/TR/CSS21/visuren.html#propdef-position
absolute
The box's position (and possibly size) is specified with the 'top', 'right', 'bottom', and 'left' properties. These properties specify offsets with respect to the box's containing block. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Also, though absolutely positioned boxes have margins, they do not collapse with any other margins.

包含块
http://www.w3.org/TR/CSS21/visuren.html#containing-block
In CSS 2.1, many box positions and sizes are calculated with respect to the edges of a rectangular box called a containing block. In general, generated boxes act as containing blocks for descendant boxes; we say that a box "establishes" the containing block for its descendants. The phrase "a box's containing block" means "the containing block in which the box lives," not the one it generates.

Each box is given a position with respect to its containing block, but it is not confined by this containing block; it may overflow.

The details of how a containing block's dimensions are calculated are described in the next chapter.

都没有明确说明Table不产生包含块。

因此楼主说的没错,是FF的渲染引擎处理有误,是渲染层面上的Bug。
WebAdvocate 2010-07-30
  • 打赏
  • 举报
回复
[Quote=引用 80 楼 theforever 的回复:]

  我在楼主的很多帖子里都说过,BUG不是随便可以说的.问题在于你是否先弄明白了这款产品的使用说明书.
不同的产品,对于细节的处理,有各自的观念和定义.那是它的规矩,你要用,就必须遵循.
TABLE侧重于对其内部内容的组织管理.DIV侧重于版块布局的控制.
作为FF,把display:table的元素作为内容处理,可以简化和清晰控制结构,也是很合理的.
无论是IE,还是FF,真正的BUG……
[/Quote]对我来说,说明书只有一个,就是W3C标准。我判断是否bug的标准也只有一个,是否符合W3C标准。不符合,就是bug。
按照自己的思路,我行我素,做一些所谓的优化,如果所有浏览器都这样,一人一套说明书,W3C标准焉有存在之道理?开发者岂不是要累死……已经有这么多兼容性问题了……知否,大道至简?
对于责任,我觉得维护标准是我们所有人责任。至于炮轰之事,更是子虚乌有。另,对错误妥协,就是姑息,李敖写过一篇文章,记得好像叫《好人坏在哪里?》,好人的第一坏----不敢与坏人争,好人的第二坏----以为"独善其身"便是好人,好人的第三坏----以为"心存善念"便是好人,,呃,说的我心里发凉……
我是坏人,哈哈,所以要让Firefox知道,它有错,需要改;让IE知道,它有不对的地方;让Chrome知道,它还年轻;让Safari知道,它也不是圣人……人非圣贤,孰能无过,何况浏览器是那么多人做的。
现实却是不能做改,但,我们可以绕开不是么,我理解你,难道你的错误就不存在了么?
一个女人,受尽丈夫虐待,不堪重压,将之杀害(附,女人很好很漂亮,为什么会嫁给那个男的,自己去想吧)试问,有人说女人判死罪罪有应得吗?但,杀人偿命,法律规定的。如果有一位少林高僧能点化那个丈夫,估计也就少一出人间惨剧了。
ls确实忠言,但也非逆耳,听起来很受用。无他,都多多努力吧!
  • 打赏
  • 举报
回复
  我在楼主的很多帖子里都说过,BUG不是随便可以说的.问题在于你是否先弄明白了这款产品的使用说明书.
  不同的产品,对于细节的处理,有各自的观念和定义.那是它的规矩,你要用,就必须遵循.
  TABLE侧重于对其内部内容的组织管理.DIV侧重于版块布局的控制.
  作为FF,把display:table的元素作为内容处理,可以简化和清晰控制结构,也是很合理的.
  无论是IE,还是FF,真正的BUG只是少数,更多的差异,是他们的匠心所至.若不理解其苦心,反动不动就说是BUG,实在也是不尊重别人的劳动和用心.毕竟如果全都遵循一种最原始简单的规范,就可以少做很多工作,当然,不排除有竞争的动机使然,说到这个,其实也都一样.而且,没有任何设计和决定能够满足所有要求,这是定理.
  一个成手,应该是能够理解制作者的考虑.这是一个境界问题,源于经验.在那之前,才总是满腔疑虑,甚至忘了应该先去学习用法规矩而去做无谓的抱怨.
  楼主作为这里的版主,年轻固然不错,但也要明白责任.与其动不动今天炮轰IE的BUG明天炮轰FF的BUG(其实我也希望看到真正的BUG,但大多都不是,所以也更失望),不如先去查找到相关的各方面资料,思考之后再决定怎么说,或者是从理解的角度去说明为什么有这样的差异--毕竟现实已经存在,毫无意义的抱怨BUG于事无补,理解存在的为什么合理,才能于人于己更好地生活和工作.
  当然,我在这里说的话,对于楼主来说,虽然是逆耳良言,但现实就是那样,往往不能真正落好.以前碰过很多人就是这样,虽然因为我的话而改变了行为方法,但对我却留下记恨.无论怎样,我不在乎,我只奉行自己的行事风格罢了,劝人说事,乐本当为,若图回报,则失吾心.楼主自处吧.
yujia402 2010-07-28
  • 打赏
  • 举报
回复
学习了
何日人再来 2010-07-28
  • 打赏
  • 举报
回复
每天回帖即可获得10分可用分!
richardjackson 2010-07-27
  • 打赏
  • 举报
回复
学习了
shine333 2010-07-27
  • 打赏
  • 举报
回复
[Quote=引用 61 楼 webadvocate 的回复:]
引用 53 楼 ihefe 的回复:

LZ, 面对不同的浏览器内核,处理机制也不同,这不是BUG!!!!

我也处理了下 ,成功了!
HTML code

<div style="width:200px; height:200px; position:absolute; background-color:silver;">
<table style="[color=#FF0000……
[/Quote]

重点在td失去了position
<td style="position: absolute">

当然,参数需要微调,以考虑table的border/spacing/padding造成的影响
<div style="width:200px; height:200px; position:absolute; background-color:silver;">
<table style="display:block; position:absolute; width:100px; height:100px; top:100px; left:100px; background-color:green; border: 0px" cellpadding="0" cellspacing="0">
<tr>
<td style="position:absolute; padding: 0px;">
<div style="position:absolute; width:50px; height:50px; top:50px; left:50px; background-color: gold;">
TEXT
</div>
</td>
</tr>
</table>
</div>
hengha1988 2010-07-27
  • 打赏
  • 举报
回复
我是过来拿分的
liuxingang88 2010-07-27
  • 打赏
  • 举报
回复
准时上线拿分
shangxiaoxiang 2010-07-27
  • 打赏
  • 举报
回复
很不错。。。。。
ZLSK8 2010-07-27
  • 打赏
  • 举报
回复
需要把一个绚丽的图片针对表格的左上角定位,,
coldpork 2010-07-27
  • 打赏
  • 举报
回复
学习了
tizll521 2010-07-26
  • 打赏
  • 举报
回复
TABLE就用table属性 别的属性能不用就不用 变成块元素就成四不像了 而且还很容易引起兼容问题 这是我在做table里的一点心得
zst861205 2010-07-26
  • 打赏
  • 举报
回复
您只能输入 10000 个字符禁用UBB 内容存入剪贴板


每天回帖即可获得10分可用分!小技巧:教您如何更快获得可用分
加载更多回复(61)

5,006

社区成员

发帖
与我相关
我的任务
社区描述
解读Web 标准、分析和讨论实际问题、推动网络标准化发展和跨浏览器开发进程,解决各种兼容性问题。
社区管理员
  • 跨浏览器开发社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧