Насколько я могу судить, вы обнаружили ошибку FIrefox.Я говорю, что это ошибка, потому что я воссоздал (как можно ближе) фактическую структуру узлов, если они не были псевдоэлементами.Теперь вам, возможно, понадобится узнать о магической ошибке дополнения Firefox , которую я исправил, но даже после этого я все равно получаю другие результаты:
http://jsfiddle.net/Dba8h/7/
Эта скрипка имеет две кнопки, которые выглядят одинаково в Chrome, Safari и Opera, но не работают в Firefox.
Одним из решений является предоставление таблицы стилей только для Firefox (для некоторых это может потребоваться jQuery) с этими правилами:
button::before, button::after { left: -12px; }
Это сместит его обратно и выровняет внутренние элементы.Конечно, если Mozilla когда-либо исправит ошибку, они внезапно будут перемещены в неправильном направлении.
В качестве альтернативы, вы можете просто захотеть найти какой-то другой способ воссоздать эффект, не используя сложную смесь псевдо-узлов, позиционирование и т. д. (Например, с помощью градиентов CSS3 вы можете получить очень похожий эффект [за вычетом кривой]. Это будет намного дешевле для браузера и будет на 99% одинаковым для большинства конечных пользователей.)
Обновление: Вот пример использования только градиентов: http://jsfiddle.net/cXHCH/1/
Это почти то же самое невооруженным глазом (исключая состояние active ), иэто намного проще в обслуживании.Градиенты, выбранные с помощью Ultimate CSS Gradient Generator