Question

我正在使用Sliding Doors技术和sprite图像来创建可跨越的按钮，在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;
}

！Sprite Image 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 - 您需要消除用户代理样式。

雪碧推拉门按钮，firefox中的额外填充

1 个答案: