ネットサービスの開発に役立ちそうな話題を中心にお届けします。
F.Ko-Jiの「一秒後は未来」 > Javascript > IE6ではselect要素にz-indexが定義されていない
2006年09月16日 13:40
1970日前に投稿

IE6ではselect要素にz-indexが定義されていない

  • ... PV
  • このエントリーをはてなブックマークに追加

スポンサード リンク

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 のほうが一般的に使われるようです。

スポンサード リンク

Written by
関連エントリーはこちら
お探しの情報が見つからない場合はサイト内検索もお試しください。
Meity.jp - 「DM送りたいのでフォローしてください」とかめんどくさくないですか？


トラックバック

このエントリーのトラックバックURL:

この一覧は、次のエントリーを参照しています: IE6ではselect要素にz-indexが定義されていない:

» IE6のselect要素にはz-indexが適用されない問題 from Copy/Cut/Paste
li要素とJavaScriptを用いてプルダウンメニューを作っていたら、プルダウンされたメニューがformのselect要素の下に回りこんでしまう。 ... [詳しくはこちら]

トラックバック時刻: 2007年04月10日 00:55

Javascript

English version

2006/09/16 13:40:28 by F.Ko-Ji
コメント (0) トラックバック (1) Javascript

前のエントリー: « gmapper.js ver.0.2.1
次のエントリー: グラフィカルなAjaxインタフェースのYahoo! Mail Betaを使ってみました »

コピペにご利用ください。

タイトル:

URL:

リンク用HTMLタグ: