IE6では、selectタグはWindowsのコントロールを使用して表示されている。 そのためか、z-indexやborder、text-alignなどいつくかのスタイルが無視される。 特に困るのがz-indexで、JavaScriptでdivタグをドラッグで移動できるようにした場合、ページ内にselectタグがあると、selectタグだけがz-indexを無視して一番上に表示されてしまう。

selectタグがz-indexを無視するサンプル

Opera9、Firefox2では正しく表示される。 IE7ではz-indexの扱いは正しくなっているが、borderやtext-alignは利かない。

このz-indexのバグはiframeタグを使って解決することができる。


iframeタグは、selectタグよりも高いz-indexが設定されていれば、selectタグよりも上に表示される。 さらに、divタグなどはiframeタグよりも高いz-indexが設定されていれば、iframeよりも上に表示される。 つまり、divタグの下に重なるようにiframeを置くことで、selectタグのz-indexが正しく働いているかのように見せることができる。

このiframeのことをshimという。

selectタグがz-indexを無視するバグのiframeを使った対策サンプル

これでIE6、IE7、Opera9、Firefox2で確認する限り問題なく表示されたが、IE6以外ではこのiframeを表示しない方が好ましい。

ただし、これで解決はしているが、iframeタグがHTML4.01 Strict 及びXHTML1.0 Strictでは未定義という点が気になる。 代わりにobjectタグで同じ対策ができないかとやってみたが、どうもうまくいかないらしい。