输入按钮上的行高仅适用于Chrome / Safari上的边框

Question

input[type="submit"]属性结合使用时，Chrome和Safari上的[line-height按钮似乎只尊重border属性。

在Chrome的调试器中查看计算出的line-height值会显示带有边框的按钮具有预期的计算值，而没有边框的按钮具有line-height: normal。

Firefox显示了两个都遵循line-height属性的版本。 Chrome和Safari不支持。

作为额外的奖励，将元素从input[type="submit"]更改为button使它们按预期工作。

任何想法为什么会这样？

CSS

.border { line-height: 3rem; border: solid 1px black; }
.noborder { line-height: 3rem; }

HTML
<input type="submit" class="border" value="input[type='submit'] with border" />
<input type="submit" class="noborder" value="input[type='submit'] without border" />

截屏
已测试浏览器

Firefox 73.0-可以正常工作。
• Google Chrome 80.0.3987.106-意外的结果。
• Safari 13.0.5-意外结果。

Answer 1

您也可以使用vertical-align：middle;而不是行高。