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/

火狐浏览器截图：

但是，在 IE-7 中它不能正常工作。（惊讶，惊讶）出于某种原因，尽管有 overflow: hidden 属性，但内部的 UL 元素没有被剪裁。

IE-7 的屏幕截图：

似乎问题在于内部 DIV 中的 position: relative 样式属性。如果我删除该样式属性，它在 IE-7 上可以正常工作。但是，我需要内部 DIV 具有 relative 位置，因为我正在使用的某些 Javascript 代码假定它可以上下滚动。

问题： 那么，这是否有某些原因不适用于 IE-7？这是一个众所周知的解决方法吗？或者 IE-7 是否真的在做正确的事情，并且由于某种原因，相对定位的节点不能是 hidden 使用 overflow 属性。

Answer 1

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