输入字段的大小属性未被遵守

Question

直接从W3Schools采取:

定义和用法size属性指定输入字段的宽度.

对于<input type="text">和<input type="password">,size属性定义应该可见的字符数.对于所有其他输入类型,size定义输入字段的宽度(以像素为单位).

所以..

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

Answer 1

HTML4规范,HTML5规范,Sitepoint,Mozilla开发者网络和Microsoft的MSDN库中指定了相同的"错误"信息.所以这不仅仅是W3Schools的错.

无论如何,虽然规范说size属性应该是可见的字符数,但是大多数Web浏览器已经决定使用em单元的数量,这意味着首都M的字符宽度.

要精确指定宽度(以像素为单位)或您选择的任何单位,请使用CSS width属性.

要回答您更新的问题:它是CSS样式应用于文本框的默认字体大小中的大写字母M的宽度,但文本框内文本的字体大小通常较小.

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

Answer 2

问题是该size = x属性不是以像素为单位...而是表示该元素必须用于保存字符的非常近似的大小.因此,例如,应显示一个可容纳2个字符的输入框.<input />x<input size=2 />

不幸的是,这在字体之间有所不同(特别是可变宽度字体),因此你可能会发现将size属性设置为2实际上会渲染一个大小为5或类似的输入框.但是,如果使用等宽字体,则size=2应该呈现一个可以容纳2个字符的文本字段...或至少接近.

但是,要<input>以像素,ems等设置元素的宽度,请尝试使用widthCSS属性:

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

上面的示例将使输入宽度精确地为20像素宽,不包括边框和/或填充.

Answer 3

你无法从字面上理解,因为这是不可能的.

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

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

此外,还添加了一些额外的空间,因此输入的size="2"宽度不会是输入的两倍size="1".

用作平均字符宽度的内容可能取决于浏览器.我在Firefox中测试过,我没有发现任何完全*匹配的字符,但字符与平均宽度非常匹配.