jquery - IE7 Jquery 位置：相对

Question

我正在使用一个需要 position:relative 的插件来为 UL 中的 li 项目设置动画。

这是一个演示：http: //jsfiddle.net/bleachie/aJPRp/

在 IE7 中 overflow:hidden 不起作用，但如果 position:relative 从 UL 中删除则起作用；该插件不起作用。

我将如何在 IE7 中解决此问题？

谢谢。

CSS

ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.jSlots-wrapper {
    overflow: hidden;
    height: 20px;
    display: inline-block; /* to size correctly, can use float too, or width*/
    border: 1px solid #999;
}

.slot {
    float: left;
}

HTML

<ul class="slot">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>
<input type="button" id="playNormal" value="play">​

Javascript

 $('.slot').jSlots({
     spinner : '#playNormal',
     winnerNumber : 7
 });

Answer 1

快速搜索出现了这个问题和答案。基本上，要让溢出隐藏在 IE6/IE7 中与相对定位的子代一起使用，您还需要相对定位容器。所以在这种情况下：

.jSlots-wrapper {
    position: relative;
    overflow: hidden;
    height: 20px;
    display: inline-block; /* to size correctly, can use float too, or width*/
    border: 1px solid #999;
}