Home > Windows > Internet Explorer > ver.6 select要素ではz-indexやborderなどのプロパティを無視する

select要素ではz-indexやborderなどのプロパティを無視する

select要素ではz-indexやborderなど、ほかのフォームコントロール要素で使用可能なプロパティの一部が無視される。

例示

<form method="post" action="./" style="position:relative; z-index:1;">
    <div>
        <select style="border:2px solid red; width:10em;">
            <option>select</option>
        </select>
    </div>
    <div>
        <input type="text" value="input" style="border:2px solid red; width:10em;" />
    </div>
</form>
<div style="position:absolute; z-index:2; left:3em; top:0; width:4em; height:4em; background:aqua;">div</div>
div

borderプロパティとz-indexプロパティに対する挙動の違いを、select要素とinput要素とで比べています。背景が空色のdiv要素はform要素とその子孫要素であるフォームコントロールを覆うように表示されるはずです。

スクリーンショット

N7N7.02での表示(標準モード)

WinIE6WinIE6.0での表示(標準モード)

補足

以下に挙げるプロパティなどがこのバグに該当します。

  • ボーダー関連のプロパティ
  • z-indexプロパティ
  • text-alignプロパティ
  • line-heightプロパティ
  • 背景画像関連のプロパティ
  • text-indentプロパティ
  • letter-spacingプロパティ
  • スクロールバー関連のプロパティ(WinIE独自拡張のscrollbar-face-colorなど)

select要素のリストボックスはWindowsのコントロールを表示しているようです。このため、z-indexプロパティをサポートしていないのはWinIEの仕様です。

修正状況

WinIE5.5、WinIE6.0標準モード、WinIE6.0互換モードでこの現象の発生を確認しました。

Home > Windows > Internet Explorer > ver.6 select要素ではz-indexやborderなどのプロパティを無視する

Search
オススメ書籍
Feeds

Return to page top