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

【问题标题】：Setting flexbox display with jquery for multiple browsers?使用 jquery 为多个浏览器设置 flexbox 显示？
【发布时间】：2014-03-16 04:49:53
【问题描述】：

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

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

虽然这有效：

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

我需要另外两个用于 safari 和 IE10。有什么方法可以编写这样它不会破坏我的代码吗？ Jquery 似乎被这种语法弄糊涂了。

【问题讨论】：

您应该始终订购带前缀的旧 > 带前缀的新 > 不带前缀。
感谢您的回复！这有什么特别的原因吗？浏览器读得更快还是怎么的？
啊等等我其实知道为什么，由于计算机读取css的顺序，不带前缀的会先读取不？
没有。浏览器应该忽略它们不理解的任何内容，并且应该优先使用同一属性的最后声明。
FOLKS - 请注意：当我提出声明时的第一个答案：“从 jQuery 1.8.0 开始，无需添加供应商前缀。” 在这种情况下这不是真的！！！ jQuery 确实为 CSS 属性名称添加了供应商前缀 - jepp 这是真的（例如：-prefix-transform:...）。但是这个问题是关于前缀 CSS 值而不是属性名称 - 并且不 - jQuery 不处理 CSS 值，例如 display: -prefixed-flex 或 background:-prefixed-linear-gradient!

标签： javascript jquery css flexbox

【解决方案1】：

自 jQuery 1.8.0 起无需添加供应商前缀。亲切弗雷德里克

【讨论】：

在这种情况下这不是真的！！！ jQuery 会为 CSS 属性名称添加前缀 - jepp 这是真的（例如：-prefix-transorm:...）。但这个问题是关于前缀 CSS 值而不是属性名称！

【解决方案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()。

【讨论】：

【解决方案3】：

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

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

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

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

很抱歉这么晚参加聚会，但也许它会帮助其他人。

【讨论】：