Bootstrap 2.3.2がIE11 エンタープライズモードで正常に動作しない

そろそろInternet Explorerの11以前のサポート期限が切れようとしていますが、会社で受けた案件で、エンタープライズモードでの動作確認がありました。

詳しい仕組みはわかりませんが、エンタープライズモードにすると、企業でなかなかバージョンアップされないIE8を模したモードで動作するそうです。

使用しているシステムは、Bootstrapを使用しているし、ほとんどのJavaScriptなどについてはjQueryなど互換性があるものを使用していたので、ぶっちゃけるとエンタープライズモードにしなくてもそのままIE11で動くんだけど、依頼要望が、

「エンタープライズモードでの動作確認」

ということでした。IE11で何もせずにそのまま動くんだったらそれでいいじゃないの、と思うんですが、まあお客さんの要望なので確認してみました。

そしたら、出ちゃいましたよ。

Dropdown(メニュー)が変な風(中途半端)に表示されてしまいます。

マウスのポインタを、おそらく表示されるはずの位置にもっていくと、以下のようになります。

ん？　なんじゃこれは。

不思議な事に、管理者ツール(F12キーで起動)で、DOMエクスプローラーで操作している最中は、ちゃんと表示されます。なぜ、DOMエクスプローラーを使用している時だけちゃんと動くんだ？(´・ω・｀)

根本的な原因についてはわかりませんでしたが、BootstrapのCSSファイルで適用されている要素を細かくチェックしていったら、

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
  color: #ffffff;
  text-decoration: none;
  background-color: #0081c2;
  background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
  background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
  background-image: -o-linear-gradient(top, #0088cc, #0077b3);
  background-image: linear-gradient(to bottom, #0088cc, #0077b3);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}

このfilterプロパティの値「progid:DXImageTransform.Microsoft.gradient」が問題だったようです。

  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);

dropdown以外にも、このプロパティ値が設定されていたので、すべてコメントアウトしました。

ボタンなどのグラデーションがすべてなくなってしまいましたが、動作としては問題ないので、そのままOKとしました。

ひょっとしたらこのグラデーションの部分を別の書き方に変更するか、背景画像をそれっぽいものにすればいいのかもしれませんが……。

こういう確認する方法が地道な作業になってしまうと、あっという間に時間が過ぎてしまいますね(´・ω・｀)

ネットで調べたのですがどこにも載っていなかったので、困っている人は参考にしてください。