F.Ko-Jiの「一秒後は未来」ではウェブやSEO、API、RSSといった技術的ネタから、ちょっとした豆知識や梅酒、エンタメ系まで様々な情報を不定期にお届けしています。

F.Ko-Jiの「一秒後は未来」 > Javascript > IE6ではselect要素にz-indexが定義されていない

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

  • B!

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

[2010-01-12] RSS フィードの URL が変わりました。お手数ですが RSS リーダーへの再登録をお願いします。
Subscribe with livedoor Reader Add to Google Subscribe with Fastladder My Yahoo!に追加 Bloglinesで閲読登録 はてなRSSに追加 エキサイトリーダーに登録


コメントを投稿

(承認されるまでコメントは表示されません。)

Javascript

English version

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

トラックバック

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

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

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

タイトル:

URL:

リンク用HTMLタグ:

Agile Media Network

AMN Partner Blog

広告掲載について

東京ナイロンガールズ
最近の注目記事
持っているガジェット
powered by Gadget Party
最近のつぶやき
えもにゅ

↑ 気持ち記録サービス「えもにゅ」です

このブログの読者になる

F.Ko-Jiの「一秒後は未来」 - RSSフィード

クマでもわかるこのブログの便利な更新チェック方法

DailyFeed

あわせて読みたいブログパーツ

フィードメーター - F.Ko-Jiの「一秒後は未来」

月別アーカイブ


<< March 2010
SuMoTuWeThFrSa
 123456
78910111213
14151617181920
21222324252627
28293031 
人気エントリー
TopHatenar
携帯からのアクセスは
QRコード
http://mob.fkoji.com/