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

有点麻烦。 我需要从display：none切换到显示：flex，display：flex-box和display：-ms-flexbox但它似乎打破了我的代码..这是我到目前为止所拥有的：

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

虽然这有效：

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

我需要另外两个用于safari和IE10。 有没有办法写这个，以免它破坏我的代码？ Jquery似乎对这种语法感到困惑。

Answer 1

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

如果您不担心意外删除任何其他元素级样式，这是一种解决方法：

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

（如果需要，当然可以为IE10添加额外的一个）。

很抱歉这个晚会很晚，但也许会帮助别人。

Answer 2

我也遇到了这个问题，@ 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将覆盖现有的display:none强制它进入可见性。 这里有几个优点：它在语义上更加清晰，如果你需要它们更容易添加额外的flexbox属性（我的实际.flex-container类由于中心对齐的前缀而具有~20个不同的属性），更容易重用其他元素的同一个类，最后如果你需要优雅地再次消失元素，你可以调用removeClass（）。

Answer 3

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