不同的高度与相同的填充

我有以下填充：padding:12px 24px;输入按钮和复选框的标签。字体在主体16px Arial中设置，所有其他字体大小都被继承。所有元素均为border:0;。为什么浏览器将1px添加到按钮的高度？所以如果标签的高度是42px - 按钮的高度是43px。这发生在Chrome和Firefox中。不同的高度与相同的填充

如何使按钮和标签的高度相同？

enter image description here

的代码部分

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

来源

2012-07-20 treng

您是否应用了任何边框？ – 2012-07-20 12:20:18

@ClydeLobo我写的所有边框都设置为0 – treng 2012-07-20 12:20:56

你用* {border：0;}还是别的吗？ – 2012-07-20 12:21:21

不知道，但它可能归结为字体的线高度，以及它们如何”重新处理HTML中的不同元素。

尝试强制的高度与CSS像这样：

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

我通常反对的元素作为一般规则设定确切的高度，但这种情况下，它可能只是做的工作，是适当的。

祝你好运。

来源

2012-07-20 12:22:42

使用'！important'只能作为最后的手段。 – techfoobar 2012-07-20 12:36:59

只使用高度：42px的按钮解决了我在铬 – Gijs 2012-07-20 12:50:26

@Gijs问题出现，因为我设置填充，而不是固定的高度。首选的方法是保持填充 – treng 2012-07-20 12:53:08

尝试添加line-height: 17px;，对不起，如果你已经尝试过线高度。

来源

2012-07-20 12:56:13 DBUK

现在，标签的高度大于按钮的高度：D，但可以，谢谢 – treng 2012-07-20 13:06:29

不同的高度与相同的填充

回答

相关问题