滚动条在 Opera 中无明显原因显示答案

【问题标题】：Scrollbar shows without apparent reason in Opera滚动条在 Opera 中无明显原因显示
【发布时间】：2013-02-13 05:59:19
【问题描述】：

Blue inline-block #b 和 vertical-align: middle 放在 red #a 内。在某个时刻blue #b 具有其父级的完整高度。

Troublemaker 仅是 Opera [1]，即使在 red parent #a [2] 下面有一些空间时，它也会在窗口上放置垂直滚动条。超级有趣的细节是，在red #a 下面似乎没有任何东西占用额外的空间——即使document element 也不会占用这个空间。

当blue #b 的display: inline-block 或vertical-align: middle 规则被丢弃时，注意到的行为会消失。尽管如此，找到一个同时保持这两个规则的解决方案还是很有用的。

若要重现 JSFiddle 中的问题，请拖动右下子框架的边框。

感谢您的关注！

[1_] 仅在我当前的版本中检查：12.11。

[2_] [jsfiddle.net 示例][1] 中大约 40-50 像素。大小随red #a 高度而变化。

【问题讨论】：

【解决方案1】：

我同意 furikuretsu 的回答。 overflow:hidden 摆脱神秘隐形内容。

奇怪的是，我在div#c 中输入的文字越多，空间就越小。当文本填充超过一半高度时，空间完全消失。这是一个观察，而不是解决方案！

我将此作为错误报告给 Opera。不知道会不会有什么好处...

【讨论】：

【解决方案2】：

http://jsfiddle.net/Mpmgv/

我自己找到了两种解决方法。

首先是隐藏blue #b的溢出。它是一个可行的解决方案这一事实让我想到 invisible big element 可能位于 blue #b 内部的某个地方，而不是其他任何地方。

第二种解决方法是在blue #b 中生成合成绝对定位的子元素。因此，所有打算放在blue #b 中的内容都将进入synthetic child。

您可以通过在 red #a 元素上添加适当的类来检查这两种解决方案。

不过，我仍然等待并非常感谢任何关于在 Opera 中出现这种奇怪问题的原因的想法。

【讨论】：