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

Posted 2023-03-06

【中文标题】<select> 与具有相同边框宽度和填充的 <input> 相比具有额外的填充

【英文标题】：<select> has extra padding compared to <input> with same border-width and padding

【发布时间】：2016-09-28 15:46:48

【问题描述】：

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> 可能没有那么简单，我发布了这个问题来确定。

【问题讨论】：

Why is it so hard to style <select> and <option> elements?的可能重复

【参考方案1】：

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

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

【讨论】：

我已经知道它们看起来不会完全一样，但我确实认为它们总是更高。有趣的是，在 OS X 中选择实际上更短。

似乎<select> 在 Windows 上的 Chrome 和 Firefox 以及 android/Chrome OS 上的 Chrome 中更高。如果有一些隐藏的 CSS 规则我可以​​禁用（即类似于我们在 researching <button> padding 时发现的规则），那么我会对这种一致性水平感到非常满意。考虑到当前的标准化水平，在 OS X 中存在较小的显示差异（受众百分比比前面提到的要小）是可以接受的。

这只是前端网页设计中令人讨厌的事情之一，完全是抛硬币。它因浏览器和操作系统而异 - 即使是 相同操作系统的不同版本 也可以呈现不同的高度、宽度、边框等。尽管它可能很麻烦，但这就是为什么我建议使用 Select2 或类似的东西。

【参考方案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>

【讨论】：

我希望根据字体大小自动调整高度。在您的 sn-p 中，选择的文本被部分裁剪：i.stack.imgur.com/bg6Xe.png。我希望有一个规则可以禁用额外的（特定于浏览器的）间距。

再次查看您的帖子，我确实喜欢使用更大（不太可能被裁剪）height，然后删除垂直填充的想法。这与vertical-align: middle 一起提供了一种非常酷的方式来获得一致性，但我不确定vertical-align 在<select> 和<input> 之间以及其他浏览器之间的兼容性。

输入文本和选择字段自动垂直对齐。但是同时使用line-height 和height 更安全。 vertical-align:middle 进行输入并选择保持在同一基线。