IE8でtwitter bootstrap2.1.1のdropdownが効かない問題の解決法

最近、Twitter Bootstrap 2.1.1を使って既存サイトを更新しました。
ブラウザやメディア別にCSS等を書く必要がなくなって非常に重宝します。

メニューにDropdownを利用したのですが、なぜかIE8だけ動きませんでした。
IE8は未だに利用されているWindows XPで動く最新のブラウザです。
切り捨てるわけにも・・・。

2012/12/11追記 ※2.2.2では修正されたことを確認しました。

問題を切り分けて調べた結果、ナビゲーション折り畳みの「collapse」がドロップダウンの邪魔をしている模様です。折りたたみ動作をしないように記述するとIE8でもドロップダウンが動きます。

しかし、せっかくのメニュー折りたたみを使わないわけにも行かず、いちいちIE8だけメニューを分けた記述をするのも・・・。せっかくラクしようとTwitter Bootstrapを利用しているわけですから、本末転倒なわけです。

そこで適当にググったところ、海外のサイトを調べた結果以下を見つけました。

Google Group
[HELP] Drop Down Menu Bootstrap Ver 2.1.1 Not Work In IE 8

日本語での情報があまり出回っていなかったので方法を転載します。

解決方法

bootstrap.css
または
bootstrap.min.css
で以下を修正

.nav-collapse.collapse {
	height: auto;
	overflow: visible; /* この行を追加 */
}

この修正による影響は特に無く、Chrome22.0+,Firefox16.0.1,Safari6.0.1,Opera12.02,Safari(iOS5),IE8,IE9で動作確認しましたがすべて動きました。

ちなみにこれがバグなのかどうかは調べてません。
2.1.1独自の問題なのか、他のバージョンでも動かないかどうかは不明です。どうか参考程度に。

[`evernote` not found]

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*