Home » Featured, Headline, 設定

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

2012 / 10 / 24 コメント募集

最近、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]

どうぞこの記事に関するコメントをお寄せ下さい

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

これらのタグのみ使用出来ます:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.

*