不同的高度与相同的填充

Question

我有以下填充：padding:12px 24px;表示输入按钮，标签表示复选框。 字体在正文16px Arial中设置，所有其他字体都继承。所有元素都border:0;。为什么浏览器会将1px添加到按钮的高度？因此，如果标签的高度为42px - 按钮的高度为43px。这种情况发生在Chrome和Firefox中。

如何为按钮和标签设置相同的高度？

部分代码

<input type='checkbox' name='remember' id="remember"/><label for="remember" >Remember me</label> <input type='submit' value='Sign in' id='signin-button' />（在HTML表单中）

Answer 1

尝试添加line-height: 17px;，抱歉，如果您已尝试行高。

Answer 2

不确定，但它可能归结为字体的行高以及如何在HTML中的不同元素中处理它们。

尝试使用CSS强制高度：

#signin-button { height: 42px!important; border: none!important; overflow: hidden; }

作为一般规则，我通常反对为元素设置精确的高度，但对于这种情况，它可能只是完成工作并且是合适的。

祝你好运。