css - 结合 "display: inline-block"与 "position: absolute": what should happen?

标签 css firefox

IE 和 WebKit 浏览器似乎同意将“position: absolute”应用于“display: inline-block”(或者,在 IE7 的情况下,设置了“hasLayout”的简单“inline”元素)应该导致 block 定位内联。也就是说,有:

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”和没有“display”设置所做的...)

最佳答案

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

But rather than actually calculating the dimensions of that hypothetical box, user agents are free to make a guess at its probable position.

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

关于css - 结合 "display: inline-block"与 "position: absolute": what should happen?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6837766/

相关文章:

html - Chrome 导航列表定位错误与 CSS/HTML 中的媒体查询

javascript - 加载页面 Firefox 时获取所有请求

python - Firefox 附加组件 SDK 错误

javascript - Media Boxes Portfolio - 单击响应式网格在浏览器 URL 栏中显示图像 URL

html - CSS3 : Transition of background color to transparent

css - 类似于 Firefox 的 Style Editor for Chrome 的开发者工具

python - 如何使用 Selenium 浏览整个网站?

javascript - 如何将 Greasemonkey 脚本转换为无需重启的 Firefox 插件?

html - css:隐藏输入文件按钮

html - 覆盖 span 和 b 元素的宽度