谁能向我解释一下输入字段的“size”属性是如何工作的？
在合理的浏览器（如 Chrome）中，我设法使 12 号和 44 号的字段与 1 号 60 号的字段一样宽（有一些边距）。但是，在 Internet Explorer 中，这两个字段比一个字段大得多。
在另一行我有 3 个字段，2 个 12 大小，1 个 28 大小。从字段中删除所有边框/填充/边距后，我有以下内容，但不明白为什么：
1 个大小为 60 的字段 = 327px 宽度
2 个字段，12 和 44 大小（总大小 56）= 87 像素和 247 像素宽度（总宽度 334 像素）
3 个字段，12、12 和 28 大小（总大小 52）= 87 像素、87 像素和 167 像素宽度（总宽度 341 像素）
为什么它在 IE 中以这种方式工作，而在其他浏览器中却不同？ 有没有办法让它始终如一地工作，只使用 CSS？ （我无法轻松访问其他方法。我很清楚还有更好的方法）
【问题讨论】：
根据 HTML5，size attribute 指定“在视觉呈现中，用户代理允许用户在编辑元素值时看到的字符数”。这是一个有点不幸的表述，不符合现实。 description in HTML 3.2 更现实：“用于将文本字段的可见大小设置为给定数量的平均字符宽度”。 “平均字符宽度”的概念非常模糊，浏览器对它的解释也不同。
因此，size 属性的实际效果当然取决于其值之外，还取决于字体和大小以及浏览器。有相当大的变化。此外，如果您连续有两个input 元素，在同一行上，占用的总宽度还取决于元素之间的间距（如果有）。
如果您想让两个input 字段相互接触，第三个input 字段在它们下方，使其占据与两者组合完全相同的宽度，那么您应该设置它们的width 属性在 CSS 和 中设置盒子模型，使宽度包括内边距和边框。示例：
<style>
input { box-sizing: border-box }
</style>
<input style="width: 12ch"><input style="width: 44ch"><br>
<input style="width: 56ch">如果您需要担心不支持 ch 单元的旧浏览器，请使用 em 单元（大致相当于“平均”字符宽度的 2 倍左右）：
<style>
input { box-sizing: border-box }
</style>
<input style="width: 6em"><input style="width: 22em"><br>
<input style="width: 28em">（你也可以结合使用单位，使用em作为后备单位，例如width: 6em; width: 12ch。）
【讨论】：
width 设置，如我的回答一样，会覆盖 size 属性，因此该方法肯定满足“仅使用 CSS”条件。