【问题标题】：Size attribute for an input field not being honored不支持输入字段的大小属性
【发布时间】：2011-10-05 16:30:40
【问题描述】：

定义和用法 size 属性指定一个宽度输入字段。

对于<input type="text"> 和<input type="password">，大小属性定义应该可见的字符数。为了所有其他输入类型，大小定义输入字段的宽度像素。

所以..

如果这是真的，为什么我的字段 <input type="text" size="2"/> 足够宽以显示 5 个 CAPTIAL MMMMM 的？

【问题讨论】：

【解决方案1】：

问题在于size = x 属性不是以像素为单位的...相反，它表示<input /> 元素必须保持x 字符的近似大小。因此，例如，<input size=2 /> 应该显示一个可以容纳 2 个字符的输入框。

不幸的是，这因字体而异（尤其是可变宽度字体），因此您可能会观察到将 size 属性设置为 2 实际上会呈现大小为 5 或类似大小的输入框。但是，如果您使用等宽字体，size=2 应该呈现一个可以恰好容纳 2 个字符的文本字段......或者至少接近。

但是，要以像素、ems 等为单位设置<input> 元素的宽度，请尝试改用width CSS 属性：

<input type="text" style="width:20px" />

以上示例将使输入宽度正好为 20 像素宽，不包括边框和/或填充。

【讨论】：

【解决方案2】：

答案是，除非使用固定宽度的字体，否则浏览器无法准确确定两个字符的宽度。我认为您的两个字符字段可能并排放置两个“m”。

关于w3schools的正确性，以下来自W3C：

size = cdata [CN] 该属性告诉用户代理控件的初始宽度。宽度以像素为单位，除非 type 属性具有值“文本”或“密码”。在这种情况下，它的值是指（整数）字符数。

【讨论】：

【解决方案3】：

你不能从字面上理解，因为那是不可能的。

元素的宽度基于size 属性和使用的字体大小，但它不能完全适合该数量的字符，因为这是不可能的。

所有字符的宽度都不相同，因此字符 llll 很容易适合带有 size="4" 的输入，但字符 mmmm 不会。

此外，还添加了一些额外的空间，因此size="2" 的输入不会比size="1" 的输入宽两倍。

平均字符宽度可能取决于浏览器。我在 Firefox 中进行了测试，并没有找到任何完全匹配的字符，但是字符 * 与平均宽度非常匹配。

【讨论】：

【解决方案4】：

HTML4 规范、HTML5 规范、Sitepoint、Mozilla Developer Network 和 Microsoft 的 MSDN 库中指定了相同的“错误”信息。所以这不仅仅是 W3Schools 的错。

无论如何，虽然规范说 size 属性应该是可见字符的数量，但大多数 Web 浏览器已决定使用 em 单位的数量，即大写字母 M 的字符宽度。

要以像素或您选择的任何单位精确指定宽度，请使用 CSS 宽度属性。

回答您更新的问题：它是默认字体大小中大写 M 的宽度，由 CSS 样式应用于文本框，但文本框内文本的字体大小通常更小。

想要在框内设置一定数量的字符吗？您必须切换到固定宽度的字体。

【讨论】：

很好的答案。我的问题是开玩笑的。我一直在与一个我写了大约一个月的新应用程序作斗争，这个问题有点把我推到了边缘。我不能相信没有一个 HTML 规范在逻辑上实现了这一点。输入字段应该以字符为中心而不是以像素为中心！！！
一些 html 验证器现在抛出 Error: Attribute “size” not allowed on element “input” at this point

【解决方案5】：

other/outer css 类可能会影响大小或内联 CSS。

我的情况是：

当使用带有“输入组”类的外部 div 时，大小或内联样式根本不起作用。如果可能，删除此类“输入组”将使其工作。

<div class="input-group">
    <input type="text" class="form-control" required style="width:20px">
</div>

【讨论】：