Html 不遵守输入字段的大小属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6699575/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Size attribute for an input field not being honored
提问by Doug Chamberlain
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.
定义和用法 size 属性指定输入字段的宽度。
对于
<input type="text">和<input type="password">， size 属性定义了应该可见的字符数。对于所有其他输入类型，大小定义输入字段的宽度（以像素为单位）。
So..
所以..
If that is true why is my field <input type="text" size="2"/>wide enough to display 5 CAPTIAL MMMMM's ?
如果这是真的，为什么我的字段<input type="text" size="2"/>足够宽以显示 5 CAPTIAL MMMMM's ？
回答by Gaurav
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.
在 HTML4 规范、HTML5 规范、Sitepoint、Mozilla Developer Network 和 Microsoft 的 MSDN 库中指定了相同的“错误”信息。所以这不仅仅是 W3Schools 的错。
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.
无论如何，虽然规范说 size 属性应该是可见字符的数量，但大多数 Web 浏览器已经决定使用 em 单位的数量，这意味着大写字母 M 的字符宽度。
To specify the width precisely in pixels, or any unit of your choice, use the CSS width property.
要以像素或您选择的任何单位精确指定宽度，请使用 CSS width 属性。
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.
要回答您更新的问题：它是由 CSS 样式应用于文本框的默认字体大小中大写 M 的宽度，但文本框内文本的字体大小通常较小。
Want to make a set number of characters fit inside the box? You'll have to switch to a fixed width font.
想要让一定数量的字符适合框内？您必须切换到固定宽度的字体。
回答by Titus
The problem is that the size = xattribute isn't in pixels... rather, it denotes the very approximatesize that the <input />element must be to hold xcharacters. So, for example, <input size=2 />should display a input box that can hold 2 characters.
问题在于该size = x属性不是以像素为单位...相反，它表示元素必须具有的非常近似的大小<input />才能容纳x字符。因此，例如，<input size=2 />应该显示一个可以容纳 2 个字符的输入框。
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.
不幸的是，这因字体而异（尤其是可变宽度字体），因此您可能会观察到将 size 属性设置为 2 实际上会呈现大小为 5 或类似大小的输入框。但是，如果您使用等宽字体，则size=2应该呈现一个可以容纳 2 个字符的文本字段......或者至少接近。
However, to set the width of an <input>element in pixels, ems, etc., try using the widthCSS property instead:
但是，要<input>以像素、em 等为单位设置元素的宽度，请尝试使用widthCSS 属性：
<input type="text" style="width:20px" />
The above example will make the input width exactly 20 pixels wide, excluding borders and/or padding.
上面的示例将使输入宽度恰好为 20 像素宽，不包括边框和/或填充。
回答by Guffa
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.
元素的宽度基于size属性和使用的字体大小，但它不会完全适合该数量的字符，因为这是不可能的。
All characters doesn't have the same width, so the characters llllwill easily fit in an input with size="4", but the characters mmmmwon't.
并非所有字符的宽度都相同，因此字符llll将很容易放入带有 的输入中size="4"，但字符mmmm不会。
Also, there is some extra space added, so an input with size="2"will not be twice as wide as an input with size="1".
此外，还添加了一些额外的空间，因此输入 withsize="2"不会是输入 with 的两倍宽size="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.
用作平均字符宽度的内容可能取决于浏览器。我在 Firefox 中进行了测试，我没有找到任何完全*匹配的字符，但该字符与平均宽度匹配得很好。
回答by Guffa
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.
答案是，除非使用固定宽度的字体，否则浏览器无法准确确定两个字符的宽度。我认为您的两个字符字段可能并排放置两个“m”。
As far as the correctness of w3schools, the following is from the W3C:
至于w3schools的正确性，以下来自W3C：
size = cdata [CN] This attribute tells the user agent the initial width of the control. The width is given in pixels except when type attribute has the value "text" or "password". In that case, its value refers to the (integer) number of characters.
size = cdata [CN] 这个属性告诉用户代理控件的初始宽度。宽度以像素为单位给出，除非类型属性具有值“文本”或“密码”。在这种情况下，它的值是指（整数）字符数。
