滑动门按钮元素只在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