Абс.позиционируемый элемент внутри кнопки расположен неправильно

Question

Я пытаюсь поместить значок внутри элемента кнопки, и я получаю странное позиционирование, но в Firefox 4. Проверьте это демо http://jsfiddle.net/j6q2e/3/

Работает как положено в Chrome и IE, но в Firefox значок полностью зарезервирован. Это известная ошибка? Есть ли способ это исправить?

(я не хочу использовать <a>, потому что это кнопка отправки формы, и я хочу сохранить ее в таком виде. Я также хотел бы избежать использования стиля фонового изображения, потому что значок в спрайте CSS изображение и использовать в качестве фонового изображения, я должен был бы сохранить его как отдельный PNG.)

Answer 1

Просто быстрое обновление, чтобы эта вещь "ответила" ...

Так что да, это ошибка в Firefox, и она по-прежнему относится к версии 5. Chrome, IE9 и Opera все правильно позиционируют значок внутри кнопки.

Есть еще одна SO нить , которая занимается этим, и вот ошибка Mozilla .

Answer 2

Вы должны иметь возможность сохранить его как спрайт и использовать его в качестве фонового изображения, просто отрегулируйте пространство вокруг этого изображения, чтобы учесть размер вашей кнопки. Вы также можете рассмотреть диагональные спрайты , чтобы помочь решить вашу проблему.