<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> 维护一个与<input> 不同的padding，但如果我可以对两者都使用一个设置，我会更喜欢。

我们找到了一个简单的 CSS 规则来解决 similar question in regarding <button>s in Firefox。我知道<select> 可能没有那么简单，我发布了这个问题来确定。

Answer 1

你真的不能用 css 为 <select> 元素设置样式，并期望它们在不同的浏览器上看起来相同 - 或者甚至期望你的规则适用于这个问题。浏览器都以自己特殊的方式处理表单元素——如果你想要在任何地方看起来都一样的东西，我建议你尝试Select2 或类似的替换插件。

例如，即使是您的 sn-p，在 OS X 10.8 上的 Chrome 中，<input> 实际上也比 <select> 高，并且与您的屏幕截图不同：

Answer 2

每个浏览器都有其默认 CSS，因此您不能信任显示的高度和边距以及其他属性，除非您清除所有默认样式并设置自己的值。我建议添加height 和box-sizing 以及vertical-align 以获得您自己的结果：

input, select { 
  padding: 2px; border: solid 1px red;
  height:20px;
  box-sizing:border-box;
  vertical-align:middle;
}

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