Question

我创建了这个JSFiddle here如果您注意到按钮和输入高度相同（40px）。如果你将6px添加到按钮高度虽然它们是相同的。首先是有一个修复，如边距或填充，为什么会发生这种情况？我在Firefox和谷歌Chrome上尝试过这两种方式，结果也是如此。

HTML：

<input id="input" class="sameHeight">
<button id="button" class="sameHeight">Button</button>

CSS：

.sameHeight{
    height:40px;
}

Answer 1

是的，您可以：

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

这应该有帮助

有关box-sizing的更多信息，请点击此处： http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Answer 2

除了cs.edoardo写的内容之外，你应该注意可能的Firefox怪癖：

/*
  Getting rid of the extra 2px padding for submit
  buttons and inputs in Firefox 4+.
  Whoever thought that was fun to implement... Òó grmlhmpfargh
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

设置为相同数量后，按钮和输入高度会有所不同

2 个答案: