为什么按钮，输入与div，a有不同的宽度结果？

Question

这是js bin http://jsbin.com/ojiJEKa/1/edit

对不起我的愚蠢问题，但是，为什么<div>＆amp; <a>和<input>的宽度结果不同<button> {{1}}？即使他们有相同的风格

如何使它们平等？

Answer 1

默认情况下，按钮和输入元素的box-sizing设置为border-box。这意味着填充和边框限定在定义的宽度内。

这不是a和div元素的基础，它们具有正常的box-sizing属性。这意味着填充和边框在宽度的顶部额外添加。

要使它们完全相同，请规范化box-sizing css属性。

Answer 2

输入和按钮有不同的盒子模型，你可以添加“box-sizing：content-box”来重置盒子模型。