1

我有以下填充：padding:12px 24px;输入按钮和复选框标签。字体在 body 中设置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 表单中）

4

2 回答 2

2

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

于 2012-07-20T12:56:13.353 回答
1

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

尝试使用 CSS 强制设置高度，如下所示：

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

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

祝你好运。

于 2012-07-20T12:22:42.287 回答