IE7 中可滚动 Div 中的 JQuery Accordion

Question

我正在尝试构建一个 UI，以便将 JQuery Accordion 包含在滚动 div 中。这在 FF 和 IE8 下工作正常，但在 IE7 上完全是嘲讽。具体来说：每当您向上或向下滚动时，整个手风琴都无法正确地上下滑动（其中一部分滚动，但其他部分则不滚动），并且手风琴的某些部分会延伸到 div 之外。单击某些折叠式标头会导致 JQuery 深处出现 JavaScript 错误。

下面是显示此问题的代码（请原谅它的不雅，因为我已从应用程序中的完整 UI 代码中减少了它）：

JavaScript 代码：

var contDiv = 'foobar'
var accordionId = 'my_accordion'

contDiv.html(    "<div id='" + accordionId + "'>" +
                    "<h3><a href='#'>First Section</a></h3>" +
                    "<div><p>foo<br>bar<br>baz<br>qux</p></div>" +
                    "<h3><a href='#'>Second Section</a></h3>" +
                    "<div><p>foo<br>bar<br>baz<br>qux</p></div>" +
                    "<h3><a href='#'>Third Section</a></h3>" +
                    "<div><p>foo<br>bar<br>baz<br>qux</p></div>" +
                    "<h3><a href='#'>Fourth Section</a></h3>" +
                    "<div><p>foo<br>bar<br>baz<br>qux</p></div>" +
                  "</div>");

var accordionDiv = $('#' + accordionId);
accordionDiv.accordion({autoHeight: false});

HTML：

<div style="height:100px;overflow:auto;"><div id="foobar"></div></div>

Answer 1

好吧，我没有 IE7 来测试这个，但我认为主要问题是 overflow:auto。为你的 HTML 尝试这种风格

<div style="height:100px; overflow-x:hidden; overflow-y:auto; position:relative; left:0; top: 0;">
 <div id="foobar" style="width:98%"></div>
</div>

另一个问题（我猜这只是上面代码中的一个拼写错误，因为你说它在其他浏览器中工作是 contDiv 需要是一个 jQuery 对象：

var contDiv = $('#foobar');

更新：好的，IE 确实需要 position:relative 才能正常工作。我也用 left:0;top:0; 更新了上面的 HTML，我记得 IE 没有设置这些位置，但我可以'另外，我将 foobar 的宽度设置为 98%，因为 IE 不会调整滚动条的宽度。 rel="nofollow">演示我到目前为止所做的事情。