JQuery/CSS - сегментированные управления

Question

Я нашел большой пост над Segmented Control in Javascript, что упоминается большим решением для создания сегментированного управления, скрипка здесь: http://jsfiddle.net/LdZk8/1/

JQuery довольно короткий, который является большим:

$("ul.buttonGroup").click(function (event) { 
    $("li", this) 
    .removeClass("selected") 
    .filter(event.target) 
    .addClass("selected"); 
}); 

Моя проблема заключается в том, что он отлично работает в сафари и хроме, но не правильно работает в firefox. Просто взгляните на скрипку в firefox и нажмите run, и вы увидите.

Кто-нибудь знает, как я могу это исправить? Я считаю, что это связано с CSS, и, возможно, элементы webkit игнорируются, но я не уверен, как исправить это для FF.

Спасибо!

Answer 1

Это работает только большой в Chrome/Safari, потому что вы включили -webkit- эффекты браузера, а не -moz-, ms и общие эквиваленты, которые вы должны были бы получить те же эффекты в Firefox и IE.

Например, если вы включили -webkit-box-flex, вам также необходимо включить -moz-box-flex для совместимости с Firefox.

Некоторые полезные ссылки:

Mozilla Developer - найти определения/синтаксис различных CSS3 свойств.

ColorZilla - получить эквивалент синтаксиса других браузеров, просто вставив версию webkit.