jquery - IE7 Jquery 位置 : Relative

Question

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

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

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

我如何在 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

快速搜索找到了这个 question and answer .基本上，要使溢出隐藏在 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;
}