在IE7 / 8中<select>高度不会扩展到100％</select>

Question

我需要我的网站能够支持IE7 / 8，我在设置输入高度时遇到问题。

在IE9中，输入延伸到父母身高的100％，但在IE8 / 7中我尝试了所有内容以扩大输入的高度而没有运气。

HTML：

<div class="element">
    <select name="searchType" class="select">
        <option value="title">Title</option>
        <option value="author">Author</option>
        <option value="isbn">ISBN</option>
    </select>
</div>

CSS：

div.element {
    width:100%;
    height:30px;
    border:1px solid #000;
    overflow:hidden;
    float:left;
}
div.element select {
    width:100%;
    height:100%;
    border:none;
    padding:2px;
}
div.element input[type=text] {
    width:100%;
    height:20px;
    border:none;
    padding:5px;
}

的jsfiddle： http://jsfiddle.net/GvX5x/1/

IE7的样子：

IE9的样子：

Answer 1

所有浏览器都有自己的方式来显示输入，选择元素等。 我建议你看一下 Chosen jQuery插件，它会改变select标签的外观吗？ 这样（例如，如果您有自定义选择），您将确保它在所有浏览器和版本上看起来完全相同。

Answer 2

很容易注意到这一点：

Internet Explorer：

TagOrID , * html TagOrId , *+html TagOrId {
        margin: 14em; /* Chrome, Safari, Opera*/
        margin: 15.3em\9; /*IE*/
        margin: 15.3em\0/; /*IE*/
}

在IE中打开您的网站并为IE定义您的CSS！