Question

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

这是示例

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

滑动门按钮元素仅在Firefox中打破

2 个答案: