使用jQuery为多个浏览器设置flexbox显示？

有点麻烦。 我需要从显示切换：无显示：flex，display：flex-box，并显示：-ms-flexbox，但它似乎打破了我的代码。以下是我到目前为止：

$(elem).css({'display': 'flex', 'display': '-webkit-flex', 'display':'-ms-flexbox'});

这虽然有效：

$(elem).css({'display': 'flex'})

我需要另外两个Safari和IE10。 有没有什么方法可以写这个，这样它就不会破坏我的代码？ Jquery似乎被这个语法困惑了。

---

我只是遇到了同样的问题。 问题是你不能在同一个对象中指定多个display值，因为你只能有一个名为display对象成员。

如果您不担心意外删除任何其他元素级样式，则可以采用以下方法：

$(elem).attr('style', 'display: -webkit-flex; display: flex');

（如果需要的话，当然也可以添加额外的IE10）。

对不起，这么晚了，但也许会帮助其他人。

---

我也遇到了这个问题，@eaj对这种情况发生的原因有了很好的认识。 我采用了一种稍微不同的方法，因为我在其他元素上使用了flexbox。 我分配了这样一个类：

.flex-container{
    display: -webkit-box !important;
    display: -moz-box !important;
    display: -ms-flexbox !important;
    display: -webkit-flex !important;
    display: flex !important;
}

然后，而不是尝试通过添加内联样式来更改它，您可以像这样添加类：

$(elem).addClass('flex-container');

!important在课堂上!important的将覆盖现有的display:none强制display:none 。 这里有两个优点：它在语义上更清晰，如果您需要它们，则更容易添加其他Flexbox属性（由于中心对齐的前缀，我的实际.flex-容器类具有20个不同的属性），更易于重用对其他元素使用相同的类，最后，如果您需要元素再次正常消失，则可以调用removeClass（）。

---

由于jQuery 1.8.0不需要添加供应商前缀。 Cordialy Frederic

链接地址: http://www.djcxy.com/p/75607.html

上一篇: Setting flexbox display with jquery for multiple browsers?

下一篇: Is css3