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-文本在底部对齐 铬 - 在中心对齐

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

Answer 2

我的解决方案是使用填充，有些css hack

#month{padding: 6px 0;}

我在jsfiddle中尝试过，它可以正常工作