滑動門按鈕元素只在Firefox中打破

Question

我正試圖做一個可用於通用目的的推拉門按鈕 除Firefox之外，一切正常。 按鈕中的span元素總是在FF中降低2px。

我這裏是

http://jsbin.com/orami3/4

Answer 1

試試這個：

button::-moz-focus-inner { 
    border: 0; 
    padding: 0; 
} 

（記住，冒號（：）加倍，是的。）

在這種情況下，額外的填充是由一個模糊的Firefox錯誤引起的。

（自己遇到這個錯誤我已經通過Google搜索找到了解決方案at this blog）。

Answer 2

好了，我不知道爲什麼會這樣，但這裏是一些陌生感。它也會影響Safari，並且略有不同。如果向按鈕跨度添加負邊距，它將在Firefox中移動一半距離，而不是在Safari中移動。所以，解決方案似乎抵消了背景圖像。這是破解它的一種方法：

/*grey button hacks non-IE*/ 
button.grey span{ 
    background-position: 0 -1px; 
} 
button.grey:hover span{ 
    background-position: 0 -36px;  
} 
button.grey:active span{ 
    background-position: 0 -71px;  
} 

/* IE workaround. The \9 makes non-IE ignore these styles*/ 
button.grey span{ 
    background-position: 0 0px\9; 
} 
button.grey:hover span{ 
    background-position: 0 -35px\9;  
} 
button.grey:active span{ 
    background-position: 0 -70px\9;  
} 

這裏舉例：http://jsbin.com/orami3/9