IE7 Jquery 位置：相对答案

【问题标题】：IE7 Jquery Position: RelativeIE7 Jquery 位置：相对
【发布时间】：2012-05-28 23:55:02
【问题描述】：

我正在使用一个需要 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
 });

【问题讨论】：

不要使用指向个人网站的链接。当您稍后更新您的页面时，该链接将对将来查看此问题的人变得无用。请发布代码或将其放入 jsfiddle。
@RyanLynch：更好的建议是：尽可能发布代码并发布到 JSFiddle。
谢谢@AndrewWhitaker，我以后会记住的。

标签： jquery html css internet-explorer internet-explorer-7

【解决方案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;
}

【讨论】：

不敢相信我以前没有尝试过这个！谢谢。