IE6でSelectボックスだけz-indexが効かないバグをjQueryで解消する方法

z-indexでレイヤー表示したボックスの上にselectボックスだけが上側に表示されてしまうIE6のバグがある。
それを解決するjQuery プラグインがある

まず事象の確認。

HTML

<div id="layer">z-index: 9999;に指定したdivボックス</div>

div#layer {
  color: #FFF;
  background: #555;
  border: 1px solid #CCC;
  position: absolute;
  width: 100px;
  height: 100px;
  z-index: 9999;
}

上記で通常問題なくレイヤー表示されるが、IE6の場合以下のようにselectボックスだけがz-indexを無視してしまう。（バグ）

これを回避するには、
　１．selectボックスを動的に表示/非表示にする
　２．iframeをselectボックスとレイヤー表示したいエレメントの間に挟む(IE6はiframeに対しては正しく動作するため)
とあるらしいのだが１．は動きが明らかに不自然。
残るは２．しかないが、実装も若干面倒。

探してみたところjQueryのプラグイン bgiframeプラグインは２．の方法を簡単に実装できるらしい。

bgiframe()を呼び出すだけ

$("#layer").bgiframe();

すると下図のように本来指定した通りの重なりとなる。

便利！！

posted with amazlet at 10.06.15

西畑一馬
アスキー・メディアワークス
売り上げランキング: 5168

おすすめ度の平均:

プログラム初心者にお勧め

自分でJavascript操作したい人にお勧め