爲什麼<button>在Firefox中仍然有填充時設置爲0

有人能解釋爲什麼<button>元素仍然有一點填充，無論樣式是什麼？比較以下代碼片段中的四個元素：<button> <a> <span> <div>，它們都應用了相同的樣式。最後三個看起來完全相同，但按鈕固執地拒絕在Firefox中丟失填充。 Inspector顯示它在Chrome中呈現相同的內容，但不包含Firefox。爲什麼<button>在Firefox中仍然有填充時設置爲0

是否有我可以應用來控制這個CSS規則？

.style { 
 
    padding: 0px; 
 
    border: none; 
 
    background-color: #000; 
 
    color: #fff; 
 
    font-family: sans-serif; 
 
    font-size: 14px; 
 
    display: inline-block; 
 
}

<button class="style">TEST</button> 
 
<a class="style">TEST</a> 
 
<span class="style">TEST</span> 
 
<div class="style">TEST</div>

來源

2016-12-28 billynoah

您可以在Firebug檢查，沒有按鍵的填充是隻需將用戶代理餘量添加到body tag即可 –

正確，沒有填充..但是..有。而按鈕是不同的像素大小。用戶代理的風格在做什麼？ – billynoah

是的，不同的useragent有自己的css，也是你的瀏覽器的設置，如字體大小，顏色等。 –

-1

它基本上是火狐瀏覽器的問題，所以嘗試添加button::-moz-focus-inner {padding: 0;border: 0}

.style { 
 
    padding: 0px; 
 
    margin: 0; 
 
    border: none; 
 
    background-color: #000; 
 
    color: #fff; 
 
    font-family: sans-serif; 
 
    font-size: 14px; 
 
    display: inline-block; 
 
} 
 
button::-moz-focus-inner { 
 
    padding: 0; 
 
    border: 0 
 
}

<button class="style">TEST</button> 
 
<a class="style">TEST</a> 
 
<span class="style">TEST</span> 
 
<div class="style">TEST</div>

來源

2016-12-28 05:07:47 aavrug

不。按鈕仍然較大。 – billynoah

這可能與操作系統或Firefox版本不同，但在我的瀏覽器中它們的大小不一樣。 – billynoah

不是所有的都是'''36px X 16px''' – aavrug

爲什麼<button>在Firefox中仍然有填充時設置爲0

回答

相關問題