раздвижная дверь, элемент кнопки сломался только в Firefox

Question

Я пытаюсь сделать кнопку раздвижной двери, которая может быть использована в общем, все работает отлично, кроме Firefox.элемент span в кнопке всегда меньше 2px в FF.

вот пример

http://jsbin.com/orami3/4

Answer 1

Попробуйте это:

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

(Имейте в виду, что двоеточие (: ) удвоено, да.)

Дополнительное заполнение в этом случае вызванонеясная ошибка Firefox.

(Столкнувшись с этой ошибкой, я нашел решение в этом блоге через поиск в Google.)

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