不遵守输入字段的大小属性
定义和用法 size 属性指定了元素的宽度。 输入字段。
对于
和，大小 属性定义应该可见的字符数。为了 所有其他输入类型，大小定义输入字段的宽度 像素。
那么..
如果这是真的，为什么我的字段 足够宽以显示 5 CAPTIAL MMMMM ？
Taken directly from W3Schools:
Definition and Usage The size attribute specifies the width of an
input field.For
<input type="text">and<input type="password">, the size
attribute defines the number of characters that should be visible. For
all other input types, size defines the width of the input field in
pixels.
So..
If that is true why is my field <input type="text" size="2"/> wide enough to display 5 CAPTIAL MMMMM's ?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
HTML4 规范、HTML5 规范、Sitepoint、Mozilla 开发人员网络和 Microsoft 的 MSDN 库中也指定了相同的“错误”信息。所以这不仅仅是 W3Schools 的错。
无论如何，虽然规范规定 size 属性应该是可见字符的数量，但大多数 Web 浏览器都选择使用 em 单位的数量，即大写 M 的字符宽度。
要以像素为单位精确指定宽度，或您选择的任何单位，使用 CSS width 属性。
回答您更新的问题：它是 CSS 样式应用于文本框的默认字体大小中大写 M 的宽度，但文本框中文本的字体大小通常较小。
想要将一定数量的字符放入框内吗？您必须切换到固定宽度字体。
The same "erroneous" information is specified in the HTML4 Spec, the HTML5 spec, Sitepoint, Mozilla Developer Network, and Microsoft's MSDN library. So it isn't just W3Schools' fault.
Anyway, while the specs say that the size attribute should be the number of characters visible, most web browsers have settled on using the number of em units, meaning the width of the character of the capital M.
To specify the width precisely in pixels, or any unit of your choice, use the CSS width property.
To answer your updated question: it's the width of the capital M in the default font size as applied by CSS styling to the text box, but the font size of the text inside the text box is usually smaller.
Want to make a set number of characters fit inside the box? You'll have to switch to a fixed width font.
问题是
size = x属性不是以像素为单位...相反，它表示所输入的近似尺寸。元素必须包含x个字符。因此，例如应显示一个可容纳 2 个字符的输入框。不幸的是，这因字体而异（尤其是可变宽度字体），因此您可能会发现将 size 属性设置为 2 实际上会呈现大小为 5 或类似大小的输入框。但是，如果您使用等宽字体，
size=2应该呈现一个可以恰好容纳 2 个字符的文本字段......或者至少接近。但是，要以像素、em 等为单位设置
元素的宽度，请尝试使用widthCSS 属性：上面的示例将使输入宽度恰好为 20 像素宽，不包括边框和/或填充。
The problem is that the
size = xattribute isn't in pixels... rather, it denotes the very approximate size that the<input />element must be to holdxcharacters. So, for example,<input size=2 />should display a input box that can hold 2 characters.Unfortunately, this varies from font to font (esp. variable width fonts), and so you will likely observe that setting the size attribute to 2 will in fact render an input box with the size of 5 or something like that. If you use a monospace font, though,
size=2should render a text field that can hold exactly 2 characters... or at least get close.However, to set the width of an
<input>element in pixels, ems, etc., try using thewidthCSS property instead:The above example will make the input width exactly 20 pixels wide, excluding borders and/or padding.
你不能从字面上理解，因为那是不可能的。
元素的宽度基于
size属性和使用的字体大小，但它不会完全适合该字符数，因为这是不可能的。所有字符的宽度并不相同，因此字符
llll很容易适合size="4"的输入，但字符mmmm代码> 不会。此外，还添加了一些额外的空间，因此
size="2"的输入宽度不会是size="1"输入的两倍。用作平均字符宽度的内容可能取决于浏览器。我在 Firefox 中进行了测试，没有找到任何完全匹配的字符，但字符
*与平均宽度匹配得很好。You can't take that literally, as that is not possible.
The width of the element is based on the
sizeattribute and the font size used, but it won't fit that number of characters exactly, because that is not possible.All characters doesn't have the same width, so the characters
llllwill easily fit in an input withsize="4", but the charactersmmmmwon't.Also, there is some extra space added, so an input with
size="2"will not be twice as wide as an input withsize="1".What's used as an average character width might depend on the browser. I tested in Firefox, and I haven't found any character that matches exactly, but the character
*matches that average width pretty well.答案是，除非使用固定宽度的字体，否则浏览器无法准确确定两个字符的宽度。我认为你的两个字符字段可能会并排放置两个“m”。
至于w3schools的正确性，以下内容来自W3C：
http://www.w3.org/TR/html4/interact /forms.html#edef-INPUT
The answer is that, unless using a fixed width font, the browser can't accurately determine the width of two characters. I think your two character field would probably fit two "m"s side-by-side.
As far as the correctness of w3schools, the following is from the W3C:
http://www.w3.org/TR/html4/interact/forms.html#edef-INPUT
其他/外部 css 类可能会影响大小或内联 CSS。
我的情况是：
当使用带有“input-group”类的外部 div 时，大小或内联样式根本不起作用。如果可能的话，删除此类“输入组”将使其正常工作。
The other/outer css class may affect the size or inline CSS.
My case is:
when using an outer div with a class "input-group", the size or inline style will not work at all. Removing this class of "input-group" if possible will make it work.