为什么输入元素的宽度设置不同

Question

我正在敲打我的头很长一段时间，并没有设置输入元素宽度的问题。

Here 100px set width for submit button
Here same 100px is set to text field

你可以检查宽度的差异。似乎有人遵循怪癖模式，但为什么设置相同的doctype？

这是FX / Chrome中的错误吗？

Answer 1

这是因为边框尺寸 试试这个，

http://jsfiddle.net/gn3Cw/2/

http://jsfiddle.net/gn3Cw/3/

Answer 2

通过在输入文本中添加box-sizing:border-box将解决此问题。

因为默认计算宽度和高度没有包含边框，通过添加box-sizing:border-box宽度和高度属性的总和包括填充和边框，但边距不会是100px

http://jsfiddle.net/wizztjh/gn3Cw/6/

box-sizing

的更多信息

Answer 3

文本字段已内置边框。看看删除边框时会发生什么：Fiddle here