[英]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>
它与浏览器实现这些元素的盒子模型的方式有关。
div
和input
都使用content-box
where-as button
使用border-box
有关详细信息,请参阅此处: http : //www.quirksmode.org/css/box.html
您可以添加box-sizing: content-box;
, -moz-box-sizing: content-box;
, -ms-box-sizing: content-box;
到CSS强制它使用计算维度的内容框方法。
编辑 - 更多信息 : 为什么Firefox使用IE框模型作为输入元素?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.