Html 在 IE 中设置 SELECT 的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/490036/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Setting the height of a SELECT in IE
提问by Craig
IE seems to ignore the height set in CSS when rendering a HTML SELECT. Are there any work around's for this or do we have to just accept IE will not look as good as other browsers?
IE 在呈现 HTML SELECT 时似乎忽略了 CSS 中设置的高度。是否有任何解决方法，或者我们是否必须接受 IE 看起来不如其他浏览器？
采纳答案by Ken Browning
There is no work-around for this aside from ditching the selectelement.
除了放弃select元素之外，没有其他解决方法。
回答by HymanNova
It is correct that there is no work-around for this aside from ditching the select element, but if you only need to show more items in your select list you can simply use the size attribute:
除了放弃 select 元素之外，没有其他解决方法是正确的，但是如果您只需要在选择列表中显示更多项目，您可以简单地使用 size 属性：
<select multiple="multiple" size="15">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
Doing this you'll have additional empty lines if your collection of items lenght is smaller than size value.
如果您的项目长度小于 size 值，这样做您将有额外的空行。
回答by Darko Z
you can use a combination of font-size and line-height to force it to go larger, but obviously only in the situations where you need the font larger too
你可以结合使用 font-size 和 line-height 来强制它变大，但显然只有在你需要字体更大的情况下
edit:
编辑：
Example -> http://www.bse.co.nzEDIT: (this link is no longer relevant)
示例 -> http://www.bse.co.nz编辑：（此链接不再相关）
the select next to the big search box has the following css rules:
大搜索框旁边的选择具有以下css规则：
#navigation #search .locationDrop {
font-size:2em;
line-height:27px;
display:block;
float:left;
height:27px;
width:200px;
}
回答by Joshua
Yes, you can.
是的你可以。
I was able to set the height of my SELECTto exactly what I wanted in IE8 and 9. The trick is to set the box-sizingproperty to content-box. Doing so will set the content area of the SELECTto the height, but keep in mind that margin, borderand paddingvalues will not be calculated in the width/height of the SELECT, so adjust those values accordingly.
我能够将我的高度设置为我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;
}
Here is a working jsFiddle. Would you mind confirming and marking the appropriate answer?
这是一个有效的jsFiddle。您介意确认并标记适当的答案吗？
回答by Daimonion
There is a work-around for this (at least for multi-select):
有一个解决方法（至少对于多选）：
- set select sizeattribute to option list size (use JavaScript or set it to any large enough number)
- set select max-heightinstead of heightattribute to desired height (tested on IE9)
- 将选择大小属性设置为选项列表大小（使用 JavaScript 或将其设置为任何足够大的数字）
- 将 select max-height而不是height属性设置为所需的高度（在 IE9 上测试）
回答by Sparr
回答by brett
Even though setting a CSS heightvalue to the selectelement does not work, the paddingattribute works alright. Setting a top and bottom padding will make your selectelement look taller.
即使为select元素设置 CSS高度值不起作用，padding属性也能正常工作。设置顶部和底部填充将使您的选择元素看起来更高。
回答by user640811
Finally found in http://viralpatel.net/blogs/2009/09/setting-height-selectbox-combobox-ie.htmla simple solution (at least for IE8):
最后在http://viralpatel.net/blogs/2009/09/setting-height-selectbox-combobox-ie.html 中找到了 一个简单的解决方案（至少对于 IE8）：
font-size: 1.0em;
BTW, for Google Chrome, found this workaround at How to standardize the height of a select box between Chrome and Firefox?*/
顺便说一句，对于谷歌浏览器，在 如何标准化 Chrome 和 Firefox 之间选择框的高度？*/
-webkit-appearance: menulist-button;
回答by rostowner
select{
*zoom: 1.6;
*font-size: 9px;
}
If you change properties, size of selectwill change also in IE7.
如果更改属性，selectIE7 中的大小也会更改。
回答by Andres SK
You can use a replacement: jQuery Chosen. It looks pretty awesome.
您可以使用替代品：jQuery Chosen。它看起来非常棒。
