在 IE 中设置 SELECT 的高度答案

【问题标题】：Setting the height of a SELECT in IE在 IE 中设置 SELECT 的高度
【发布时间】：2010-10-04 03:39:51
【问题描述】：

在呈现 HTML SELECT 时，IE 似乎忽略了 CSS 中设置的高度。是否有任何解决方法或者我们必须接受 IE 看起来不如其他浏览器？

【问题讨论】：

【解决方案1】：

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

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

这适用于 ie7 和 ie8。你可能只需要height 属性，我只是添加了position 和display 来覆盖从更高层继承的属性。

【讨论】：

【解决方案2】：

是的，你可以。

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

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

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

【讨论】：

那个小提琴甚至无法在 IE7 中打开。
IE8 也一样，fiddle 无法正确加载...在我测试过但没有用...

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

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

希望这会有所帮助。

【讨论】：

【解决方案6】：

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

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

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

【讨论】：

【解决方案7】：

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

font-size:      1.0em;

顺便说一句，对于 Google Chrome，在以下位置找到了此解决方法 How to standardize the height of a select box between Chrome and Firefox? */

-webkit-appearance: menulist-button;

【讨论】：

【解决方案8】：

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

【讨论】：

【解决方案9】：

您可以做类似于 facebook 所做的事情，只需在周围添加填充。它没有人们希望的那么好，但看起来相当不错。

【讨论】：

【解决方案10】：

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

【讨论】：

【解决方案11】：

另见inconsistent box model 在输入、选择、...之间

【讨论】：

【解决方案12】：

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

编辑：

示例 -> ~~http://www.bse.co.nz~~ 编辑：（此链接不再相关）

大搜索框旁边的select有以下css规则：

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

【讨论】：

font-weight 也有作用。 “字体粗细：粗体；”对我产生了积极的影响，甚至没有意识到（直到我今天删除它并找到了这篇文章；）

【解决方案13】：

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

【讨论】：

我使用 jquery。谁能指出一个适用于 jQuery 的良好 SELECT 替代品？

【解决方案14】：

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

【讨论】：

据我所知，这对于普通的 IE7 是正确的。仿真器和测试器可能不同，但同时使用虚拟机和真正的古董计算机我无法完成这项工作。你说得对。不要把时间浪费在 SO 上的大量错误或误导性内容上。