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

Question

我正在努力理解textarea和输入文本的cols和size属性的行为。虽然它应该是直截了当的，但我无法弄清楚如果cols和size值相同，为什么它们有不同的宽度？

根据文档，两个属性都应该调整元素的大小，以便允许给定数量的字符在内部：

  

... 尺寸属性指定可见的宽度（以字符为单位）   输入元素。 [source - w3schools]

     

请注意列和行属性（...）指定多少列高和行宽   文本区域。值以字符衡量   。 [source - w3]

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

例如：

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

产生

见这里 - http://jsfiddle.net/yjERR/

我在Chrome 29和Firefox 24中都试过这个。

据我所知，宽度取决于字体样式，但两个元素是否仍然具有相同的宽度？内部元素边缘或其他因素导致了这种差异吗？

更新

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

udpated fiddle

Answer 1

“可见字符宽度”是一个模糊的表达式，因为在大多数字体中，字符的宽度会有所不同。除非你使用等宽字体，否则你不能期望得到一个包含确切数字字符的控件。

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

如果你真的想让元素同样宽（我认为不应该），那么你可以明确地设置字体和宽度，例如。

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” */
}

Answer 2

将两个元素设置为相同font-family，它将正确显示。

以下是jsFiddle

的示例

Answer 3

如果重要的是容易且精确地使其均等地变宽，则可以使用行值为1的textarea代替输入文件。

毫无疑问，答案来得有点晚，但这不花任何钱...