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.
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?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.