html - IE7 - 使用 div 屏蔽选择 - 选择的高度被忽略，下拉菜单的位置太高，超过文本

Question

我使用 div 作为掩码，将其设置为绝对位置和 z-index 1。在它上面，使用 z-index 2 和相对位置，我放置了一个选择。

我在 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);
}

Answer 1

遗憾的是，select元素不接受 IE7（以及其他各种浏览器/版本）中的设置高度。这是一个类似的先前问题。你最好的选择是使用别的东西。