在渲染HTML中的SELECT元素时，IE似乎会忽略CSS中设置的高度。是否有任何解决方法，或者我们必须接受在IE中它看起来不如其他浏览器好?
14个回答
22
除了放弃使用 select 元素外，没有其他解决方法。
- Ken Browning
1
1据我所知，对于普通的IE7来说，这是正确的。虚拟机和测试工具可能会有所不同，但是无论是使用虚拟机还是真正的古董计算机，我都无法使其正常工作。你是对的。不要浪费时间在SO上那些错误或误导性的东西上。 - philw
16
虽然除了放弃 select 元素之外没有绕过这个问题的方法是正确的，但是如果你只需要在选择列表中显示更多项目，那么你可以简单地使用 size 属性：
<select multiple="multiple" size="15">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
如果你的项目集合长度小于指定的大小，这样做会导致额外的空行。
- JackNova
7
您可以使用字号和行高的组合来强制文本放大，但仅适用于需要放大字体的情况。
编辑：
例如 -> http://www.bse.co.nz编辑：（此链接已不再相关）
在大型搜索框旁边的选择框具有以下CSS规则：
#navigation #search .locationDrop {
font-size:2em;
line-height:27px;
display:block;
float:left;
height:27px;
width:200px;
}
- Darko Z
1
字体加粗也可能会产生影响。我甚至没有意识到“font-weight: bold;”对我有积极的影响（直到今天我将其删除并发现了这篇文章 ;)）。 - Campbeln
5
是的，你可以。
我能够在IE8和9中将我的SELECT的高度设置为我想要的确切值。诀窍是将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 。请您确认并标明适当的答案？
- Joshua
2
那个小提琴甚至不能在IE7中打开。 - philw
同样的问题出现在IE8上，fiddle无法正确加载... 顺便说一下，我已经测试过了，它没有起作用... - Roman Losev
3
即使为CSS的元素看起来更高。
- brett
3
这个问题有一个解决方法（至少对于多选）：
- 将选择器的size属性设置为选项列表的大小（使用JavaScript或将其设置为足够大的任何数字）
- 将选择器的max-height属性设置为所需高度，而不是height属性（在IE9上测试通过）
- Daimonion
3
最终在http://viralpatel.net/blogs/2009/09/setting-height-selectbox-combobox-ie.html找到了一个简单的解决方案（至少对于IE8）：
font-size: 1.0em;
顺便提一句，对于Google Chrome，在如何在Chrome和Firefox之间标准化选择框的高度？中找到了这个解决方法。*/
-webkit-appearance: menulist-button;
- user640811
2
select{
*zoom: 1.6;
*font-size: 9px;
}
如果您更改属性，select 的大小也会在IE7中更改。
- rostowner
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接