Why does a button element's height not match that of a sibling input element with same height properties?

问题

I have the following:

<div    style="border:solid 1px gray; height:22px; line-height:22px; display:inline-block;">Div</div>
<input  style="border:solid 1px gray; height:22px; line-height:22px; vertical-align:top;" type="text">
<button style="border:solid 1px gray; height:22px; line-height:22px; vertical-align:top;">Button</button>

As you can see in this jsFiddle, Why is the button element 1px shorter than the rest? in Chrome and firefox.

回答1:

It has to do with the way the browser implements the box model for those elements.

div and input both use the content-box where-as button uses border-box

See here for more info: http://www.quirksmode.org/css/box.html

You can add box-sizing: content-box;, -moz-box-sizing: content-box;, -ms-box-sizing: content-box;

to the CSS to force it to use the content-box method of calculating dimensions.

Edit--More Info: Why does Firefox use the IE box model for input elements?

来源：https://stackoverflow.com/questions/5381776/why-does-a-button-elements-height-not-match-that-of-a-sibling-input-element-wit