为什么一个按钮元素的高度不匹配具有相同高度属性的同级输入元素的高度？ [英] Why does a button element's height not match that of a sibling input element with same height properties?

问题描述

我有以下：

<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>

正如你在 jsFiddle ，为什么按钮元素比其余的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

有关详情，请访问此处： http：// www .quirksmode.org / css / box.html

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.

修改 - 更多信息：为什么Firefox对输入元素使用IE框模型？

这篇关于为什么一个按钮元素的高度不匹配具有相同高度属性的同级输入元素的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！