html - CSS 溢出属性的范围/深度

Question

考虑以下 HTML:

<div style = "overflow: hidden; height: 5em" id = "selections-outer-wrapper">
    <div id = "selections-inner-wrapper" style = "position: relative">
        <ul style = "text-align:left; width: 12em;">
             <!---- LOTS OF LI ELEMENTS GO HERE ---->
        </ul>
    </div>
</div>

我的意图是，如果最外层 DIV 的高度超过 5em，则应该隐藏(剪裁)任何内容。 (这就是 overflow: hidden 样式属性的目的。)当我使用 Firefox 或任何基于 Webkit 的浏览器呈现此 HTML 时，内部内容被正确剪裁。

jsfiddle 链接:http://jsfiddle.net/Q82N9/

Firefox 截图:

但是，在 IE-7 中它不能正常工作。(惊喜，惊喜)由于某些原因，内部 UL 元素没有被剪裁，尽管 overflow: hidden 属性。

使用 IE-7 的屏幕截图:

问题似乎出在内部 DIV 中的 position: relative 样式属性上。如果我删除那个样式属性，它在 IE-7 上工作正常。但是，我需要内部 DIV 有一个 relative 位置，因为我正在使用的某些 Javascript 代码假设它确实如此，以便上下滚动它。

问题:那么，是否有某些原因导致它无法在 IE-7 上运行？这是解决方法的众所周知的问题吗？或者 IE-7 实际上在做正确的事情，并且由于某些原因，相对定位的节点不能使用 overflow 属性来hidden。

Answer 1

将position:relative添加到带有溢出声明的容器中，问题应该解决了。