［JQuery覚書］IE8でSlidetoggle()のmarginが消えるバグの回避方法

［JQuery覚書］タイトルのプラスマイナスの背景画像が切り替わるアコーディオンコンテンツ – ponnao-clip

こちらのやり方で設定したJQueryのアコーディオンコンテンツですが、IE8だと閉じた時にタイトルボタンのmarginが消えるというバグがありました。ちょっとしたことだけど、なんか気持ち悪くて回避方法を探しに探したメモです(><; この方とまったく同じ状況 IE8のJavascriptアコーディオンについて – 質問・相談ならMSN相談箱

結論：親要素に「overflow:hidden」を設定

例えば上のように、dldtddでアコーディオンを設定してる場合は、dlに「overflow:hidden」を設定すれば、dtのmarginが消えず普通に動きました！

上のTweetはあとから見付けたやつだけど、jQueryのフォーラム（海外）で一番最初に見つけました。

IE8 bug (?) – slidetoggle -> disappearing margins (example included) – jQuery Forum

Google 翻訳してまでも調べてみたw「overflow:hidden」と答えてる方が数人います。

javascript編集でも直るらしいけど・・・

jQuery slideUp() で IE8 だけ margin がぶっ壊れる問題が釈然としないけど治った – chaotic valkyrie
勉強不足でこちらのコードを見ても見当がつきませんでした（ーー；

margin消えバグの概要

IE8 Toggle Bug?? jQuery – HTML – CSS masters needed | ActiveDen Community Forums

IE8のJquery関連バグ色々

ie8でjqueryのtoggle()が使えない｜zenbackキーワーズ

ちょw最初は動きもしなかったってことなのか（＾＾；

IE8 で jQuery の slideDown() と fadeIn() が効かないことがある件 | Unformed Building

IE8 で jQuery の slideDown() と fadeIn() が効かないことがある件 DEMO | Unformed Building

今、文中の動かないものがあるというデモページを確認したら、全て正常に動作していたので、これ関連のバグはアップデートで修正されたのかもしれません。

参考サイト

解決事項とは関係なかったのですが、アコーディオン仕様とCSSの挙動についての実装結果が載せられてるので、今後の参考になりそうです！

jQueryアコーディオン/2｜POPS-WEB｜POPS WEB

javascriptJQuery

Posted by ponnao