JQuery/CSS - 分段控件

Question

我在 Segmented Control in Javascript 上找到了一篇很棒的帖子提到了创建分段控件的一个很好的解决方案， fiddle 在这里:http://jsfiddle.net/LdZk8/1/

jquery 很短，这很棒:

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

我的问题是这在 safari 和 chrome 中运行良好，但在 firefox 中无法正确呈现。只需在 firefox 中查看 fiddle 并点击运行，您就会看到。

有谁知道我该如何纠正这个问题？我相信它与 CSS 相关，也许 webkit 元素被忽略了，但我不确定如何为 FF 解决这个问题。

谢谢!

Answer 1

它仅在 Chrome/Safari 中运行良好，因为您包含了 -webkit- 浏览器效果，而不是 -moz-、ms和一般等效物，您需要它们才能在 Firefox 和 IE 中获得相同的效果。

例如，当您包含 -webkit-box-flex 时你需要包括 -moz-box-flex也是为了 Firefox 的兼容性。

一些有用的链接:

Mozilla Developer - 查找各种 CSS3 属性的定义/语法。

ColorZilla - 只需粘贴 webkit 版本即可获得其他浏览器的等效语法。