3

我只是第一次使用 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 ......但显然我更愿意避免这种情况（部分原因是我没有足够的能力正确地做到这一点）。

我很惊讶地发现以前没有人问过这个问题......所以我猜这是一个我不知道的痛苦显而易见的解决方案。

谢谢！

4

1 回答 1

1

尝试使用heightStyle选项：

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

http://jsfiddle.net/HNp5r/

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

于 2013-04-30T19:37:54.517 回答