jQuery UI 手风琴和盒子大小：border-box

Question

我只是第一次使用 jQueryUI，我对我能用它做些什么感到非常兴奋。然而，我似乎很快就遇到了问题，因为我在我的页面上使用了 box-sizing:border-box。

例如，如果我在页面上有这个基本的 HTML（手风琴标签内的文本在我的真实页面中更丰富，这只是为了演示目的）：

<div id='accordion'>
<h3>Header 1</h3>
<div>This is <a href="#">paragraph one</a>.</div>
<h3>Header 2</h3>
<div>This is <a href="#">paragraph two</a>.</div>            
<h3>Header 3</h3>
<div>This is paragraph three.</div>
</div>

我可以用 jQuery 把它变成手风琴：$('#accordion').accordion()。

但是，如果 box-sizing 设置为 border-box ：

* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

}

然后，每当我打开手风琴部分时（在最后），手风琴部分就会有一个非常不愉快的“啪”声。如果我删除 box-sizing 设置（不是一个可能的永久解决方案），那么“快照”就会消失。

真的不能仅仅因为我将 box-sizing 设置为 border-box 而不能使用 jQueryUI 手风琴吗？我想我可以修改他们的代码以使用 box-sizing...但显然我更愿意避免这种情况（部分原因是我没有足够的能力正确地做到这一点）。

我惊讶地发现以前没有人问过这个问题......所以我猜这是一个我不知道的非常明显的解决方案。

谢谢！

Answer 1

尝试使用heightStyle选项：

$('#accordion').accordion({
    heightStyle: 'content'
});

http://jsfiddle.net/HNp5r/

我不确定为什么它可以解决问题。