Кнопки раздвижных дверей Sprite, дополнительная обивка в Firefox - PullRequest
Новая
       23

Кнопки раздвижных дверей Sprite, дополнительная обивка в Firefox

0 голосов
/ 17 мая 2011

Я использую технику «Раздвижные двери» со спрайтовым изображением для создания настраиваемых кнопок в 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

1 Ответ

2 голосов
/ 17 мая 2011

Если 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 - вам нужно стереть стили пользовательского агента.

...