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>

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

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

Firefox的截图：

然而，使用IE-7它无法正常工作。（惊讶，惊讶）由于某种原因，内部UL元素不会被剪裁，尽管{{1} } property。

IE-7截图：

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

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

Answer 1

使用溢出声明将position:relative添加到容器中，问题应该解决。