3

考虑以下 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: hiddenstyle 属性的目的。）当我使用 Firefox 或任何基于 Webkit 的浏览器呈现此 HTML 时，内部内容被正确裁剪。

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

火狐截图：

在此处输入图像描述

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

IE-7 截图：

在此处输入图像描述

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

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

4

1 回答 1

2

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

于 2013-05-15T20:17:04.760 回答