input submit高度问题

Question

调节input的button和submit等按钮样式的时候，写了height值，发现input的按钮样的高度是包括padding和border的，即height(css)=height(input)+padding+border，我是在chrome中发现这个问题的，firefox没有安装，所以没有尝试，求解答和解决方法。

Answer 1

input[type="submit"] 的 box-sizing 是 border-box，和 input[type="text"] 不同；

可以使用:
box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;

Answer 2

我觉得你已经回答了自己的问题啊。。。

• border 和 padding 都是可以清零的，但是 border 清零会同时清除默认的背景样式（渐变的效果）。
• 如果不想清除默认的背景样式，那就把 width 设置成（你想要的宽度 - padding - border），height 同理。

但是不同浏览器、操作系统里的默认按钮样式可能不同，所以现在很普遍的做法是，清除默认的 padding 和 border，完全自己设置它的样式。

最后补充一点，与问题无关，但是忍不住想说：写网页，该装的浏览器是必须要装的，这是专业精神和态度的体现。既然已经考虑到 Firefox 了，装一下试一下何妨呢？

Answer 3

不太懂问题的点，或许你需要的是box-sizing:border-box;？