<select>已微胖相比<input>具有相同的邊框寬度和填充

Question

input, select { padding: 2px; border: solid 1px red; }

<input value="Foo"> 
 
<select><option>bar!</option></select>

即使這些都具有相同的padding和border-width，所產生的<select>顯然比其相應的<input>高。 （在Firefox測試）

你能解釋一下身後的高度差的原因何在呢？如果我刪除padding或border-width規則，那麼問題就會消失。不幸的是，這不是我的項目的好解決方案。

我希望擁有跨瀏覽器一致的像素完美佈局，即使是移動瀏覽器也是如此。到目前爲止，我一直在爲<select>保留一個不同的padding，比我的<input>要好，但是如果我可以同時使用一個設置，則會更喜歡。

我們找到了一個簡單的CSS規則來解決similar question in regarding <button>s in Firefox。我知道這可能不是那麼簡單的<select>我發佈了這個問題找出肯定。

Answer 1

你真的不能風格<select>元素與CSS和期望他們同在不同的瀏覽器 - 或甚至希望你的規則適用於這個問題。瀏覽器都以自己特殊的方式處理表單元素 - 如果你想要的東西看起來一模一樣，我建議你嘗試Select2或類似的替換插件。

即使您的片段，例如，在Chrome OS X上10.8 <input>其實比<select>高，不會像你的截圖：