本文介绍了为什么一个按钮元素的高度不匹配具有相同高度属性的同级输入元素的高度？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有以下：
<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>
正如你在，为什么按钮元素比其余的1px短？在Chrome和firefox中。
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 和输入 $ c> content-box 其中 - 按钮使用 border-box
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
您可以添加 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.
修改 - 更多信息：
这篇关于为什么一个按钮元素的高度不匹配具有相同高度属性的同级输入元素的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！