jqueryUI accordion と -moz-box-sizing: border-box; の罠
手持ちのプロジェクトにjquery UI の accordionを使ってみようと思い実装してみた。
が、なぜかアコーディオンが開くアニメーションのときに横幅がboxの内側にズレて凹んだ形で開いてしまう。
開閉のアニメーションが終わると正しい横幅に直るのだが、今度は高さが短くスクロールバーが表示されてしまう現象が発生。
ブラウザはFireFox3。
ためしにjqueryUIのデモと同じソースをコピって動かしても同じ現象になる。
ということはcssかと思って、デザイナが作ったcssをず〜っと追ってみるとどうも
* {-moz-box-sizing: border-box;}
という部分が影響しているようだ。
これをはずすとうまく動く。
この-moz-box-sizingは、ブラウザごとに異なるwidth,heightの算出結果の差分を調整するためのプロパティのようだ。
デザイナに問い合わせてみるが、これを取り去ってしまうとこれまでのデザインがすべて崩れるのでダメと言われてしまった。
仕方ないので試行錯誤してみる。
するとaccordion内コンテンツ部分のdivにインラインで
<div style="-moz-box-sizing: content-box">〜</div>
としたら、現象が治まったのでとりあえずだがこれで様子を見ようと思う。
こんな感じ。
<div> <div id="accordion"> <h3><a href="#">Section 1</a></h3> <div style="-moz-box-sizing: content-box"> <p>ああああああああああああああああああああああ</p> </div> <h3><a href="#">Section 2</a></h3> <div style="-moz-box-sizing: content-box"> <p>いいいいいいいいいいいいいいいいいいいいいい</p> </div> <h3><a href="#">Section 3</a></h3> <div style="-moz-box-sizing: content-box"> <p>うううううううううううううううううううううう</p> </div> <h3><a href="#">Section 4</a></h3> <div style="-moz-box-sizing: content-box"> <p>ええええええええええええええええええええええ</p> </div> </div> </div>