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

Question

我想了解的行为cols和size对文本区域和输入文本属性,恭恭敬敬.虽然它应该是直截了当的,但如果cols和size值相同,我无法弄清楚为什么它们有不同的宽度？

根据文档,两个属性都应该调整元素的大小,以便给定数量的字符可以适合:

... size属性指定输入元素的可见宽度(以字符为单位).[来源 - w3schools]

注意的cols和行属性(...)指定有多少高大列和行宽以使文本区域.值以字符为单位 .[来源 - w3]

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

例如:

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

生产:

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

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

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

UPDATE

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

udpated小提琴

Answer 1

"可见字符宽度"是一种模糊的表达,因为在大多数字体中,字符的宽度各不相同.除非使用等宽字体,否则您不能期望获得包含确切数字字符的控件.

有两个基本的东西使宽度input和textarea不同.首先,默认字体是不同的:在大多数浏览器中,等宽字体用于textareasans-serif字体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” */
}