Sprite 滑动门按钮，firefox 中的额外填充

Question

我使用带有精灵图像的滑动门技术来创建可跨度的按钮，在 Firefox 中，右侧有一些额外的填充，但在 IE 和 Chrome 中一切看起来都很完美。

这是 CSS 和图像..有什么想法吗？谢谢你！

.button::-moz-focus-inner {
    border: none;  /* overrides extra padding in Firefox */
}


@media screen and (-webkit-min-device-pixel-ratio:0) {
    /* Safari and Google Chrome only - fix margins */
    .button span {
        margin-top: -1px;
    }
}


.button { 
    position: relative;
    border: 0; 
    padding: 0;
    cursor: pointer;
    padding: 0 14px 0 0;
    background: transparent url(../img/button.png) no-repeat right -58px; 
}

.button span {
    padding: 5px 3px 8px 16px;
    background: transparent url(../img/button.png) no-repeat left top; 
    color:#6d6d6d;
    font-size: 12px;
    text-transform: uppercase;
    position: relative;
    display: block; 
    white-space: nowrap;
    text-align: center; 

}

.button:hover, .button.button_hover { 
    background-position: right -87px; 
}

.button:hover span, .button.button_hover span{
    background-position: 0 -29px;
}

!精灵图像1

Answer 1

如果 FF4 添加：

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {border:0;padding:0;margin:0;}

如果较旧的 FF 添加：

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

在 .css 文件开头的某个位置。 Firefox 有它自己的 forms.css - 您需要删除用户代理样式。