IE8でメニューが表示されないときの原因とCSSでの解決方法

IE8でメニューが表示されなくなる原因

Internet Explorer 8（IE8）でメニューが表示されない場合、その原因のひとつとして、別のスタイルシート内にある特定のdiv要素が影響している可能性があります。

特に注意が必要なのは、opacityプロパティの使用です。標準的なopacityプロパティはクロスブラウザ対応のソリューションではないため、IE8では正しく動作せず、要素が非表示になってしまうことがあります。

IE8に対応したopacityの記述方法

IE8でも透過度を適用してメニューを正しく表示させるには、以下のように-ms-filterとfilterプロパティを組み合わせて記述します。

opaque {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* 1番目 */
    filter: alpha(opacity=90);  /* 2番目 */
}

各プロパティの役割

-ms-filter：IE8以降で有効な独自拡張フィルタです。DXImageTransformのAlphaフィルタを使って透過度を指定します。

filter: alpha()：旧バージョンのIE（IE5.5〜IE7など）向けの記述方法です。後方互換性を持たせるために併記しておくと安心です。

ポイント

このように複数の記述を併用することで、モダンブラウザでは標準のopacity、IE8以前では独自フィルタが適用され、すべての環境でメニューが正しく表示されるようになります。古いIEへの対応が必要なサイトでは、このようなフォールバック（代替記述）を用意しておくことが重要です。