CSS與Firefox的不一致 - 選擇表單域

我有一個表格input和select全部在height:32px。
Firefox將文本對齊到所有其他瀏覽器對齊中心。

我想使文字居中，但似乎有問題。
有什麼建議嗎？ HERES MY FIDDLE CSS與Firefox的不一致 - 選擇表單域

enter image description here

<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;}

來源

2012-10-27 t q

您是否嘗試過select-line-height屬性？使其與高度相同 – xfx

@xfx http://jsfiddle.net/nalagg/ULQNQ/2/沒有做任何事情 –

我的解決方案是使用填充和一些CSS黑客 – xfx

我的解決辦法是利用填充，以及一些CSS破解

#month{padding: 6px 0;}

餘噸裏德它的jsfiddle，它的工作原理

來源

2012-10-27 03:23:15 xfx

其實，如果你給高度選擇框，並觀察文本不同的瀏覽器對準的是不同的實現 firfox - 文本從頂部靠左 IE-文本在底部鉻對齊 - 在中心對齊

一個解決方案是給填充選擇框，這也是一個最小的解決方案，因爲如果你頂部填充修復firfox然後在IE填充添加到頂部和文本對齊到進一步底部。另一個問題是你填充的填充量也會適用於選擇下拉按鈕。最好的解決方法是避免選擇框的高度，並保持框的默認高度。如需進一步參考，請訪問鏈接。這可能會澄清 I want to vertical-align text in select box

來源

2012-10-27 07:49:09 surendra

CSS與Firefox的不一致 - 選擇表單域

回答

相關問題