IE7中可滾動Div中的JQuery手風琴

Question

我試圖建立一個UI，以便在滾動div中包含一個JQuery手風琴。 在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 left:0;top:0; 同樣，我記得IE並沒有設置這些位置，但是我找不到參考。 此外，我將foobar的寬度設置為98％，因為IE不會將其調整為滾動條的寬度。 這是到目前為止我所做的演示 。