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不会调整到滚动条的宽度。这是我到目前为止所做的demo。

IE7中Scrollable Div中的JQuery Accordion

1 个答案: