不同的高度與相同的填充

我有以下填充：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

不同的高度與相同的填充

回答

相關問題