将"display:inline-block"与"position:absolute"结合起来:会发生什么?

Poi*_*nty 8 css firefox

IE和WebKit浏览器似乎同意"position:absolute"应用于"display:inline-block"(或者,对于IE7,简单的"inline"元素设置为"hasLayout")应该会导致块内联.也就是说:

Hello there <label style='position: absolute; display: inline-block'>sir</label>
Run Code Online (Sandbox Code Playgroud)

那些浏览器会显示:

Hello theresir
Run Code Online (Sandbox Code Playgroud)

要么

Hello there sir
Run Code Online (Sandbox Code Playgroud)

但是,Firefox(3及以上,我认为)会给出这样的:

Hello there
sir
Run Code Online (Sandbox Code Playgroud)

也就是说,它们使"内联块"元素在新行上开始.现在,这显然不是什么"inline-block的"确实被用"的立场:绝对的"组合,也不是什么"的立场:绝对"不无"显示:inline-block的".这是一个错误,还是一个糟糕的(含糊不清的)规范?

是一个非常简单的jsfiddle.

(编辑 - 也许这就是 Firefox用"position:absolute"和没有"display"设置做的事情...)

Bor*_*sky 4

规范中实际上并未定义此处的正确行为。基本上,垂直位置应该是“好像该位置不是绝对的”。更准确地说,http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height的这一部分是相关的:

但用户代理无需实际计算该假设盒子的尺寸,而是可以自由猜测其可能的位置。

也就是说,实现此功能的 Gecko 代码早于 Gecko 的 inline-block 实现,因此仅检查原始显示是否为“内联”。我提交了https://bugzilla.mozilla.org/show_bug.cgi?id=674435来研究在 Gecko 中更改此设置。