CSS3: почему это не работает в FireFox?

Question

http://jsfiddle.net/tNg2B/

Если вы просматриваете его как в Chrome, так и в FF, разница очевидна. В Firefox псевдо-классы «: before» и «: after» не работают должным образом. Как я могу это исправить?

Редактировать: мне нужно, чтобы он был кросс-браузерным. Эта версия работает в IE, но не FF: http://jsfiddle.net/tNg2B/13/ Я в основном удалил: before и: after и добавил еще два <span> s

Answer 1

Если вы собираетесь использовать CSS3, сделайте это правильно.Вы можете использовать градиенты и закругленные углы, например:

background-image: -webkit-linear-gradient(top, #FFFF00, #FF8000);
background-image: -moz-linear-gradient(top, #FFFF00, #FF8000);
border-radius:15px;

JSFiddle: http://jsfiddle.net/tNg2B/11/

Answer 2

Таблица стилей пользовательского агента firefox помещает! Важное в высоту строки элемента кнопки. я получил это, чтобы выровнять в Firefox, используя поплавки .... что не имеет смысла для меня, потому что я думал, что сгенерированный контент требует абсолютного позиционирования ... в любом случае. Вы можете увидеть это здесь:

http://jsfiddle.net/jalbertbowdenii/aFZTf/1/

просто запустите стили Firefox, поместив их в "@ -moz-document url-prefix () {}"

но я должен сказать, что у @Dennis и @derekerdmann есть действительно хорошие моменты (и решения !!!!) в отношении вашего вопроса. Однако, если у вас нет выбора (ов) или вам все равно, есть ваше решение.

Я тестировал его только в ff7.1 и chrome 17.0.942.0 dev-m

Answer 3

Вы слишком усложняете решение распространенной проблемы. Вы можете сделать это с помощью нескольких простых правил и еще более простого HTML:

<button type="button">test</button>

Добавьте следующий CSS:

button {
    padding: 0.3em 0.8em;
    border: 1px solid #FFAA22;
    background-image: linear-gradient( top, #FFF07E, #FFAA22 );
    background-image: -webkit-linear-gradient( top, #FFF07E, #FFAA22 );
    background-image: -moz-linear-gradient( top, #FFF07E, #FFAA22 );
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    font-size: 1.8em;
}


button:hover {
    background-image: linear-gradient( top, #FFF07E, #FFAA22 70% );
    background-image: -webkit-linear-gradient( top, #FFF07E, #FFAA22 70% );
    background-image: -moz-linear-gradient( top, #FFF07E, #FFAA22 70% );
}

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

Вот оно действие: http://jsfiddle.net/t9ryJ/1/