2011-05-17 55 views
0

我使用滑动门技术与雪碧图像创建跨度按钮,在Firefox中,右侧有一些额外的填充,但一切看起来完美的IE和铬。雪碧滑动门按钮,在Firefox中额外填充

这里的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

回答

2

如果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 - 你需要清除用户代理样式。