IE6におけるselect要素とz-index

2006年8月22日 22:53

IEではselect要素ではz-indexやborderなど、ほかのフォームコントロール要素で使用可能なプロパティの一部が無視されます。
Javascriptを使ってのプルダウンメニューと重なったりすると厄介です。

<span style="position:absolute; top:10px; left:10px; width:70px; height:70px; background-color:#CBD8CC; z-index:2;"> DIV_001</span> 
<select style="position:absolute; top:65px; left:55px; z-index:1;"> 
<option> select</option>  
</select>

上記のコードですと、通常は
Firefoxキャプチャー
となるはずですが、IEですと
IEキャプチャー
となり、z-indexの要素が無視されてしまいます。

この対処方法は<iframe> を使用する以外対処方法はありません。（苦肉の策です）

<span style=" position:absolute; top:10px; left:10px; width:70px; height:70px; background-color:#CBD8CC; z-index:3;">DIV_001</span> 
<span style=" position:absolute; top:10px; left:10px; z-index:2;"> 
<iframe width="70" height="70" scrolling="no" frameborder="0"></iframe>
</span> 
<select style="position:absolute; top:65px; left:55px; z-index:1;">
<option>select</option> 
</select>

ようは、<select>要素と一番上に出したい<span>の間に<iframe>をはさんであげるという方法です。
HTMLの構造的にかなりおかしい使い方です。
IE7では解消されているようですが、当分IE6のシェアは大きいでしょうから、仕方ありませんね。
ただし、Operaでは<iframe>が前面にきちゃいますので、これまたこまりもの・・・

お名前 *
メールアドレス *
サイトURL
コメント

Go Page Top