jQuery UI аккордеон и размер коробки: border-box

Question

Я просто играю с jQueryUI в первый раз и очень волнуюсь за то, что я могу с ним сделать. Тем не менее, я, кажется, столкнулся с проблемами довольно быстро, так как я использую box-size: 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().

Однако, если коробка-калибрование установлен пограничный ящик с:

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

}

Тогда есть очень неприятный «хватка» в секции аккордеона всякий раз, когда я открываю один вверх (в в самом конце). Если я удалю настройку размера коробки (не возможное, постоянное решение), тогда «привязка» исчезнет.

Может ли это быть так, что я не могу использовать аккордеоны jQueryUI просто потому, что я установил размер окна в рамку? Полагаю, я мог бы изменить свой код для работы с размером окна ... но, очевидно, я бы предпочел избежать этого (отчасти потому, что я недостаточно компетентен, чтобы сделать это правильно).

Я был удивлен, увидев, что этого раньше не спрашивали ... поэтому я предполагаю, что это очень очевидное решение, о котором я просто не знаю.

Спасибо!

Answer 1

Попробуйте использовать heightStyle вариант:

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

http://jsfiddle.net/HNp5r/

Я не знаю, почему он исправляет эту проблему, хотя.