css - 滑动门按钮元素仅在 Firefox 中损坏

Question

我正在尝试做一个可以通用的滑动门按钮，除了 Firefox 之外，一切都很好。按钮中的 span 元素在 FF 中总是低于 2px。

这是示例

http://jsbin.com/orami3/4

Answer 1

尝试这个：

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

（请注意，冒号 ( : ) 是双倍的，是的。）

在这种情况下，额外的填充是由一个不起眼的 Firefox 错误引起的。

（我自己也遇到了这个错误，我通过谷歌搜索在这个博客上找到了解决方案。）

Answer 2

Well, I don't know why this happens, but there is some strangeness here. It affects Safari as well, and it's slightly different. If you add a negative margin to the button span, it will move half the distance in Firefox than it does in Safari. So, the solution seems to offset the background-image. Here is one way to hack it:

/*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;      
}

Example here: http://jsbin.com/orami3/9