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

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规则，则问题就会消失。不幸的是，这对我的项目来说不是一个好的解决方案。

我希望拥有跨浏览器一致的像素完美布局，即使使用移动浏览器也是如此。到目前为止，我一直为padding维持<select>与<input>不同，但我更愿意为两者使用一个设置。

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

Answer 1

你真的无法用css设置use strict; use warnings 'all'; use feature 'say'; use Time::Piece; my $dtime = localtime()->strftime('%Y_%m%b_%d%a'); say for grep { -f and /$dtime/ } glob '*.txt'; 元素的样式，并期望它们在不同的浏览器上看起来一样 - 甚至期望你的规则适用于那个问题。浏览器都以自己特殊的方式处理表单元素 - 如果你想要的东西看起来一样，我建议你尝试Select2或类似的替换插件。

即使是您的代码段，例如，在OS X 10.8上的Chrome中，<select>实际上比<input>更高，并且与您的屏幕截图不相似：

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>