2012-11-24 67 views
0

http://jsfiddle.net/q6dgv/CSS:爲什麼造型按鈕元素與其他CSS不同?

<button type="submit" style="padding: 10px;">Button</button> 

有沒有填充,但:

<button type="submit" style="padding: 10px; background: #ff0000;">Button</button> 

確實有填充。

這可能是一個FF錯誤?我在其他瀏覽器中進行了測試,並且按預期工作。我也試過其他的CSS,他們沒有效果,只是背景。

好的。所以,因爲沒有人回答...什麼是按鈕重置?如何擺脫默認邊框,方塊陰影等。將背景與無邊框,輪廓等結合使用不會重置按鈕。

+0

此外,背景刪除所有其他默認樣式以及...怪異。 –

+0

對我來說看起來是一樣的。版本17 - 刪除默認樣式在所有瀏覽器中都是相同的。 – sachleen

+0

這沒有任何意義。你所說的是刪除默認樣式取決於在接受其他任何東西之前刪除單個樣式。 –

回答

1

OS /瀏覽器默認樣式的執行方式與CSS的工作方式以及CSS本身支持的方式不同。一旦你改變了按鈕的背景,可能很難或甚至不可能保持默認樣式的其他方面的應用。

要刪除默認邊框和填充,下面的代碼通常被用於:需要

BUTTON, 
BUTTON::-moz-focus-inner { 
    border: 0; 
    padding: 0; 
} 

::-moz-focus-inner pseudoelement在Firefox擺脫隱性微胖的。

+0

這正是我想知道的。按鈕重置與常規重置不同。我通過谷歌瀏覽所有重置按鈕信息,而且我找不到任何東西。而且你是正確的,因爲添加背景會改變其他樣式。在該示例中,添加背景會刪除邊界半徑並應用舊的1995邊框。 –