输入按钮上的线条高度仅适用于Chrome/Safari的边框。

Question

Chrome和Safari上的input[type="submit"]按钮似乎只在将line-height属性与border属性相结合时才尊重border属性。

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

火狐显示这两个版本都尊重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" />

屏幕截图

​

浏览器测试

expected.

• Google results.

• Safari 73.0 -作为 Chrome 80.3987.106-意外的results.
• Safari 13.0.5 -意想不到的结果。

Answer 1

您也可以使用垂直对齐:中间；而不是线的高度。