html - css 与 firefox 不一致 - 选择表单字段

Question

我有一个表单，其中 input 和 select 字段都位于 height:32px。
Firefox 将文本对齐到顶部，而所有其他浏览器都居中对齐。

我想将文本居中对齐，但似乎遇到了问题。
有什么建议吗？ HERES MY FIDDLE

<select id="month" class="" name="month">
    <option value="1">February</option>
    <option value="2">March</option>
    <option value="3">April</option>
    <option value="4">May</option>
    <option value="5">June</option>
    <option value="6">July</option>
    <option value="7">August</option>
    <option value="8">September</option>
    <option selected="" value="9">October</option>
    <option value="10">November</option>
    <option value="11">December</option>
    <option value="12">undefined</option>
</select>
<input type="text" value='some text' />

更新:line-height 似乎没有做任何事情

#month, input {height:32px; line-height:32px; vertical-align:middle;}
#month select{line-height:32px;}

Answer 1

实际上，如果您为选择框提供高度并观察各种浏览器中的文本对齐方式，则实现方式不同firfox -- 文本从左上对齐IE-文本底部对齐chrome - 居中对齐

一种解决方案是为选择框提供填充，这也是一个最小的解决方案，因为如果您使用顶部填充来修复 firfox，那么在 IE 中，填充会添加到顶部，文本会对齐到更远的底部。另一个问题是您提供的填充同样适用于选择下拉按钮。最好的解决方案是请避免选择框的高度并保持框的默认高度。如需进一步引用，请访问链接。这可能会澄清 I want to vertical-align text in select box