与具有相同边框宽度和填充的 <input> 相比，<select> 具有额外的填充

Question

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

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

尽管它们都有相同的padding和border-width，但结果<select>显然比相应的要高<input>。（在火狐浏览器中测试）

您能解释一下身高差背后的原因吗？如果我删除padding或border-width规则，那么问题就会消失。不幸的是，这对于我的项目来说不是一个好的解决方案。

我希望拥有跨浏览器一致的像素完美布局，即使是移动浏览器也是如此。到目前为止，我一直保持与 for 不同的for padding，但如果我可以对两者使用一种设置，我会更喜欢。<select><input>

我们发现了一个简单的 CSS 规则来解决Firefox 中关于 s 的类似问题<button>。我知道这可能没那么简单，因为<select>我发布这个问题是为了确定答案。

Answer 1

每个浏览器都有其默认的 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>