IE6 の select タグは z-index 非対応

というバグがあるらしく、このサイト などでもわかりやすく紹介されているのですが、はずかしいことに自分、先日まで知らぬままでした。例えば、タブ形式とかプルダウンメニューで z-index で制御する機会なんてざらにあるのに、こんなバグなどあったら相当難儀なのではないでしょうか。かくいう自分がかなりハマりました。

INFO: How the Z-index Attribute Works for HTML Elements
http://support.microsoft.com/default.aspx?scid=kb;en-us;177378

上記ページに詳細が書かれてあるんですが、要約すると「IEでは、select は windowed element であり、HTML element ではない。したがって、z-index に準拠した動作はしない」とのことで、これはバグではないといいたげで、なんというか...。

ただ、いろいろ探してみると、解決方法はあるようで、

Sample for using a DIV IFRAME shim to cover over
SELECT Boxes and other windowed controls in IE.
http://dotnetjunkies.com/WebLog/jking/archive/2003/10/30/2975.aspx

上記にあるように、iframe タグを組み合わせれば、意図した制御ができるようになるそうで、いろんなサイトの実装を見てみると、例えば、

Yahoo! User Interface Library
http://developer.yahoo.com/yui/

などがそんな対処方法をしていました。が、iframe は XHTML の最新バージョンで仕様から外れてしまっている(代替としてobject)ようで、この対処方法も将来的には見直しが必要になってしまいそうです。

2 Responses to “IE6 の select タグは z-index 非対応”

  1. zaiku says:

    selectタグのバグ回避の為、いろいろとサイトを巡ってこちらにたどり着きました。
    上記の記事、大変参考になりました。

    ご参考になるかはわかりませんが、overflow:autoをかけるとiframe同様に消えてくれました。

    例:

    test
    test
    test
    test

    選択してください
    選択してください
    選択してください

    test
    test
    test

    …ちょっとコメントが汚れてしまってすみませんm(_ _)m

  2. y.shimazu says:

    おー、ありがとうございます。今度ためしてみますー。

Leave a Reply