Css 滑动门按钮元件仅在Firefox中损坏

我正在尝试做一个滑动门按钮，可以用于一般用途 除了Firefox，其他一切都很好。 按钮中的跨度元素始终在FF中降低2px

下面是一个例子

---

嗯，我不知道为什么会发生这种情况，但这里有些奇怪。这也会影响到狩猎活动，而且略有不同。如果在按钮范围中添加负边距，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;      
}

这里的示例：

试试这个：

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

（注意冒号（：）是加倍的，是的。）

本例中的额外填充是由一个模糊的Firefox错误引起的

---

（我自己也遇到了这个bug，我通过谷歌搜索找到了解决方案。）

酷！我的英雄！多谢了。顺便说一句，这也移除了聚焦环，这最终可能会导致您出现可访问性问题。