Question

IE渲染HTML SELECT时似乎忽略了CSS中设置的高度。是否有任何相关的工作或我们必须接受IE看起来不如其他浏览器好？

Answer 1

除了放弃select元素之外，没有解决方法。

Answer 2

除了放弃select元素之外没有解决方法是正确的，但是如果你只需要在选择列表中显示更多项目，你可以简单地使用size属性：

<select multiple="multiple" size="15">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>

如果您的项目集合长度小于大小值，那么您将拥有额外的空行。

Answer 3

你可以使用font-size和line-height的组合来强制它变大，但显然只在你需要更大字体的情况下

编辑：

示例 - ＆gt; ~~http://www.bse.co.nz~~ 编辑:(此链接不再相关）

大搜索框旁边的选择具有以下css规则：

#navigation #search .locationDrop {
    font-size:2em;
    line-height:27px;
    display:block;
    float:left;
    height:27px;
    width:200px;
}

Answer 4

是的，你可以。

我能够将SELECT的高度设置为我想要的IE8和9中的高度。诀窍是将box-sizing属性设置为content-box。这样做会将SELECT的内容区域设置为高度，但请注意，margin，border和padding值不会在宽度/高度中计算SELECT的{{1}}，因此请相应地调整这些值。

select {
    display: block;
    padding: 6px 4px;
    -moz-box-sizing: content-box;
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
    height: 15px;
}

这是一个有效的jsFiddle。你介意确认和标记适当的答案吗？

Answer 5

使用像jquery或yui这样的UI库，它提供了原生SELECT元素的替代方法，通常作为组合框实现的一部分。

Answer 6

即使为选择元素设置CSS height 值也不起作用， padding 属性可以正常工作。设置顶部和底部填充将使您的选择元素看起来更高。

Answer 7

最后在http://viralpatel.net/blogs/2009/09/setting-height-selectbox-combobox-ie.html中找到一个简单的解决方案（至少对IE8来说）：

font-size:      1.0em;

对于谷歌浏览器，BTW发现了这种解决方法 How to standardize the height of a select box between Chrome and Firefox? * /

-webkit-appearance: menulist-button;

Answer 8

有一种解决方法（至少对于多选）：

将选择尺寸属性设置为选项列表大小（使用JavaScript或将其设置为足够大的数字）
将 max-height 而不是 height 属性设置为所需高度（在IE9上测试）

Answer 9

您可以使用替换：jQuery Chosen。它看起来非常棒。

Answer 10

select{
  *zoom: 1.6;
  *font-size: 9px;
}

如果更改属性，select的大小也会在IE7中更改。

Answer 11

另请参阅输入之间的inconsistent box model，选择，...

Answer 12

你可以做类似facebook的做法，只需添加填充。它并不像人们希望的那样好，但看起来相当不错。

Answer 13

不确定，但我认为这不是一个'多'类型的选择元素的高度问题，而是一个下拉类型的选择元素。我遇到过下拉状态看起来被压扁并且没有清楚地显示所选值的时候。毫无疑问，它与页面上使用的CSS样式信息有关。阻止它的唯一方法是更改CSS（这可能会以您不希望受影响的方式影响整个页面或部分内容），或者在select元素本身中使用样式信息来覆盖破坏它的CSS。例如：

<select name="myselect" id="myselect" style="font-size:15px; height:30px">
<option value="someval">somedescr</option>
...
</select>

希望这有帮助。

Answer 14

我想将选择框的高度设置为小于默认值。

select {
   position: relative;
   height: 10px !important;
   display: inline-block;
}

这适用于ie7和ie8。您可能只需要height属性，我只是添加了position和display来覆盖从dom上方继承的属性。

在IE中设置SELECT的高度

14 个答案: