关于html：为什么textarea`cols`和输入文本`size`产生不同的元素宽度

Why do textarea `cols` and input text `size` yield different element widths

我试图分别了解textarea和输入文本的cols和size属性的行为。尽管应该是直截了当的，但我无法弄清楚为什么如果cols和size值相同，它们的宽度为何不同？

根据文档，这两个属性都应确定元素的大小，以使给定数量的字符可以放入其中：

...size attribute specifies the visible width, in characters, of
an input element.

Note the cols and rows attributes (...) specify how many columns tall and rows wide to make
the text area. The values are measured in characters
.

但是，如果我尝试为两个元素分配相同的值，则它们最终将具有不同的宽度。输入字段太小，无法容纳给定数量的字符和文本区域-太宽。最重要的是，两者都有不同的宽度。

例如：

1 2	<input type="text" size=40> <textarea cols="40"></textarea>

产生：

textarea cols input text size

看到这里-http://jsfiddle.net/yjERR/

我已经在Chrome 29和Firefox 24中进行了尝试。

我知道宽度取决于字体样式，但是两个元素是否仍应具有相同的宽度？是内部元素边距还是其他原因导致这种差异？

更新

看来这两个元素具有不同的字体样式，但是分配相同的font-family和font-size仍会产生不同的宽度：

enter image description here

过分提琴

相关讨论

"字符的可见宽度"是一个模糊的表述，因为在大多数字体中，字符的宽度会有所不同。因此，除非您使用等宽字体，否则您不能期望获得容纳确切数量字符的控件。

有两个基本的要素使input和textarea的宽度不同。首先，默认的字体不同：textarea的等宽字体，input的无衬线字体，在大多数浏览器中。即使相同的字体大小，这也会导致不同的宽度。其次，textarea小部件在右侧包含一小区域，将在需要时用于垂直滚动条。有效地，该元素默认具有overflow: auto。您可以使用overflow: hidden删除它，但是当用户输入适合该区域的更多行时，将出现一个主要问题。

如果您确实想使元素等宽(我认为您不应该如此)，则可以显式设置字体和宽度，例如

1
2
3
4
5
6

input, textarea{
font-family: Arial, sans-serif;
font-size: 100%;
width: 26em; /* fallback for the next one, for browsers not recognizing ch */
width: 40ch; /* sets the width to 40 times the width of the digit"0" */
}