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

时间:2011-07-26 23:19:50

标签: css firefox

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

Hello there <label style='position: absolute; display: inline-block'>sir</label>

这些浏览器会显示:

Hello theresir

Hello there sir

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

Hello there
sir

也就是说,它们使“inline-block”元素在新行上开始。现在,显然不是“inline-block”没有与“position:absolute”相结合,也就是“position:absolute”没有“display:inline-block”。这是一个错误,还是一个糟糕的(含糊不清的)规范?

Here是一个非常简单的jsfiddle。

编辑 - 也许 Firefox使用“position:absolute”做什么,没有“显示”设置......)

1 个答案:

答案 0 :(得分:4)

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

  

但不是实际计算那个维度   假设框中,用户代理可以自由猜测其可能性   位置。

也就是说,实现这个的Gecko代码早于Gecko实现的内联块,因此只检查原始显示是否为“内联”。我提交了https://bugzilla.mozilla.org/show_bug.cgi?id=674435来研究在Gecko中改变它。