IE6(おそらくIE6以前)では、select要素にCSSのz-indexが定義されていません。z-indexというのはレイヤーの重なりの順番です。

そのため、select要素のある画面にdiv要素でレイヤーを被せようとすると、IE6ではレイヤーの上にselect要素だけ残って表示されてしまいます。

これを防ぐためには、レイヤーをiframe(インラインフレーム)にするか、レイヤーを表示するときにJavaScriptを使ってselect要素を visibility:hidden にする必要があります。

var elems = document.getElementsByTagName("select");
for (i = 0; i < elems.length; i++) {
 elems[i].style.visibility = "hidden";
}

もしくは、

/* CSS */
select.hidden { visibility: hidden; }
/* JavaScript */
var elems = document.getElementsByTagName("select");
for (i = 0; i < elems.length; i++) {
 elems[i].className = "hidden";
}

このようにクラス名を変更するのもありです。

レイヤー上のコンテンツが常に同じものであればiframeで大丈夫ですが、レイヤー上のコンテンツが動的に変わる(例えばlightboxのような)場合は、上記のような方法でselect要素を一時的に非表示にしましょう。

ちなみに、IE7ではこのバグは解消されているらしいです。

※ (追記) 元々 display: none にすると書いていましたが、レイアウトが乱れる場合があるので visibility: hidden のほうが一般的に使われるようです。

• 
• ツイートで共有

著者について

F.Ko-Ji

Webエンジニアやってます。最近は ドットインストール の開発がお仕事です。その傍ら、個人で Meity や 電車遅延なう、梅酒.in、 #グラドル自画撮り部 の部室といったネットサービスを開発・運営してます。梅酒と草野球とリアル脱出ゲームが好きです。

» 詳しいプロフィールや運営サービスの一覧など