css - Modernizr:IE10 和 Flexbox:如何检测 IE10 Flexbox

Question

我正在使用 Modernizr v3在我的网站上测试 flexbox 支持。

Modernizr 为支持它的浏览器添加了一个"flexbox" 主体类，为不支持它的浏览器添加了一个"no-flexbox"。由于不支持 flexbox 的浏览器只是我的一小部分观众，我使用了 "no-flexbox" 类来提供后备 CSS。例如:

.ad { /* Default CSS */
display: flex;
}

.no-flexbox .ad { /* Fallback CSS*/
display:table;
}

一切正常，除了 IE10，因为 Modernizr 向它添加了一个“no-flexbox”类，即使 IE10 确实支持 Flexbox，它只是使用旧语法。因此，在 IE10 上，我的布局被破坏了，因为它读取了 flex box 和 non-flexbox 样式。

In this thread ，它说 modernizer 对 IE10 有 flexboxtweener 风格。因此，我想我可以重写我的回退以使用 .no-flexboxtweaner 而不是 .no-flexbox。

问题是支持新的 flexbox 语法的浏览器也被赋予了一个 no-flexboxtweaner 类，所以他们读取回退代码。

我如何设置它，以便只有不支持任何形式的 flexbox 的浏览器(无论它是新的还是旧的)获得“否”类。

我知道我可以做“.no-flexbox .ad, .no-flexboxtweaner .ad”，但是那样会使 CSS 膨胀(加上运行两个 Modernizr 测试)。我宁愿只有一个测试/类(class)。

Answer 1

I know I could do ".no-flexbox .ad, .no-flexboxtweaner .ad", but then that's bloating the CSS (plus running two Modernizr tests). I'd rather just have a single test/class.

这有点傻，伙计。它只有几个字节——几乎所有字节都将通过 gzip 文件被删除。如果你真的想避免它，你可以创建一个额外的 Modernizr 检查，为你提供任何 flexbox

Modernizr.addTest('anyflexbox', (Modernizr.flexbox || Modernizr.flexboxtweener))

这将创建一个名为 anyflexbox 的新属性，您可以相应地设置您的 css 样式。