Textarea和输入具有不同的宽度

Question

CSS:

textarea, input {
  width:300px;
}

HTML:

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

为什么输入和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;
}

大小调整CSS3属性可以做到这一点.border-box值(与内容框默认值相对)使最终呈现的框表示声明的宽度,并在框内剪切任何边框和填充.

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

你在这方面比我快.该死的ipad!无论如何快速解释:这个属性带回一个旧的盒子模型,包括边框和元素宽度的填充,而当前默认的盒子模型总结元素的宽度,边框宽度和填充,以获得最终的宽度元素.由于默认填充,Textareas实际上更大.编辑:该死的甚至在你更快的解释:-) (2认同)