Textarea和输入具有不同的宽度

Question

CSS：

textarea, input {
  width:300px;
}

HTML：

<textarea id="input"></textarea>
<br>
<input type="submit">

现场演示：http://codepen.io/qaz/pen/teaiG

为什么输入和textarea显示不同的宽度？我需要添加哪些属性才能使它们具有相同的宽度？

更新： 通过将边框和填充设置为0px，我可以使它们以相同的宽度显示。没有人想要填充：0px，但是，奇怪的是，当填充是两个10px时，它们不再是相同的宽度。现在我已经找到了一个带填充的解决方案：0px，我仍然对解释和解决方案感兴趣，它允许我仍然有填充。

（我在Windows 7上使用Chrome 35。）

Answer 1

尝试设置如下：

textarea, input {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

http://jsfiddle.net/QV9PE/

box-sizing CSS3属性可以做到这一点。 border-box值（与内容框默认值相对）使最终呈现的框具有声明的宽度，并在框内部切割任何边框和填充。

我们现在可以安全地声明我们的textarea宽度为300px，包括基于像素的填充和边框，并完美地完成布局。

Answer 2

尝试以下CSS和HTML。我不知道理论上的答案，但这是一个切实可行的解决方案：http://codepen.io/anon/pen/BGeci

CSS：

textarea, input {
  width:300px;
}

input[type=submit] {
  width:306px;
}

HTML：

 <textarea id="input"></textarea><br>
 <input type="text" id="input2"></textarea><br>
 <input type="submit">