如何均衡文本输入字段的高度？答案

【问题标题】：How can I equalize the heights of text input fields?如何均衡文本输入字段的高度？
【发布时间】：2011-02-08 04:15:42
【问题描述】：

平衡<select..> 元素和<input type="text"..> 元素高度的最佳方法是什么？由于盒子大小模型的差异，这被证明很困难。

谷歌浏览器的用户代理样式表是这样的：

select { -webkit-box-sizing: border-box; }

..而其他文本输入字段使用内容框模型。为什么有区别？我是否应该让所有基于文本的输入字段都使用边框模型？

顺便说一句，我正在使用符合标准的模式（通过使用<!DOCTYPE html>）。

【问题讨论】：

一个我没有答案的有趣问题。如果你在这里什么都没有，也许再问一遍doctype.com
Select inputs and text inputs in HTML - Best way to make equal width?的可能重复

标签： css forms google-chrome webkit

【解决方案1】：

是的..这非常困难。
不要忘记，Firefox 对表单元素的处理方式也不同。跨浏览器表单操作充其量是不可能的。 :D

一些注意事项。 line-height 不能用于所有元素..即。 firefox 将行高硬编码为 input[type=text] 元素。

我有一篇关于使用 inline-block 和垂直对齐的文章，这可能会有所帮助..（使用 verital-align:baseline;） The Joys of Inline Block at screwlewse.com

还请记住，许多较新的浏览器都添加了这种 chrome，以使表单输入看起来更像操作系统。（但这看起来是一个不同的问题）

【讨论】：

【解决方案2】：

怎么样？

select {padding: 1px;}

【讨论】：

【解决方案3】：

您不能直接使用 CSS 将所有输入和选择字段的高度明确设置为特定的像素高度吗？如果由于边框而“看起来”不像相同的高度，请删除边框或以相同的方式将它们全部统一设置。例如：

<html>
  <body>
    <input type=text style="border: 1px solid black; height: 37px;">&nbsp;
    <select style="border: 1px solid black; height: 37px; line-height: 37px; font-size: 28px;"></select>&nbsp;
    <input type=button style="border: 1px solid black; height: 37px;">
  </body>
</html>

这使得所有三个表单域的高度均为 37 像素。适用于 IE 和 Chrome，但我没有在其他地方测试过。

或者，一旦页面加载完毕，循环遍历所有表单域，找到最大的一个，然后使用它们的 style.height 属性设置其他表单域的高度。

【讨论】：

查看我的编辑。你提到的有很多方法，你只需要尝试不同的风格。

【解决方案4】：

是的，您应该使用使所有“基于文本的输入字段使用边框模型”。

这已经在其他几个 SO 问题中得到了回答，such as here。

WhatWG/W3c 接受当前的边界框模型这一事实已经够奇怪了。
他们没有始终如一地这样做更奇怪。

覆盖默认值以创建一致的设计并没有错。
没有其他解决方案能像它一样可靠或正确。

【讨论】：

【解决方案5】：

也许我不在基地，但您是否尝试过使用 line-height 值？

【讨论】：