html - IE7 - div を使用して選択をマスクする - 選択の高さが無視され、ドロップダウンの位置がテキストの上で高すぎる

Question

div をマスクとして使用し、絶対位置と z-index 1 に設定します。その上に、z-index 2 と相対位置を使用して、select を配置しました。

私はIE7でこのコードに苦労しています。基本的に、IE7は選択の高さを無視します-したがって、ドロップダウンリストをマスクのテキストの上に移動しすぎます。

これがフィドルです。

<div class="select-container">
    <div class="mask">This is the mask</div>
    <select>
        <option>Please Select</option>
        <option>option 1</option>
        <option>option 2</option>
        <option>option 3</option>
    </select>
</div><!-- /select_container -->


.mask {
    height: 32px;
    width: 200px;
    line-height: 30px;
    padding-left: 10px;
    position: absolute;
    z-index: 1;
    border: 1px solid grey
}

.select-container select {
    height: 34px;
    width: 212px;
    position: relative;
    z-index: 2;
    top: 0;
    opacity: -1;
    filter: alpha(opacity:-1);
}