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上，我的布局被打破，因为它同时读取弹性框和非弹性框样式。

In this thread，它表示现代化器具有IE10的flexboxtweener风格。因此，我认为我可以重写我的后备使用.no-flexboxtweaner代替。no-flexbox。

问题是，支持新flexbox语法的浏览器也会获得一个no-flexboxtweaner类，因此他们会阅读回退代码。

如何设置它以便只有不支持任何形式的Flexbox的浏览器（无论是新的还是旧的）都会获得“no”类。

我知道我可以做“.no-flexbox .ad，.no-flexboxtweaner .ad”，但随后又臃肿了CSS（加上运行两个Modernizr测试）。我宁愿只有一个测试/班级。

Answer 1

我知道我可以做“.no-flexbox .ad，.no-flexboxtweaner .ad”，但随后又臃肿了CSS（加上运行两个Modernizr测试）。我宁愿只有一个测试/班级。

有点傻，伙计。它是少数字节 - 几乎所有字节都将通过压缩文件来删除。如果你真的想避免它，你可以创建一个额外的Modernizr检查，为你提供任何flexbox

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

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

Answer 2

检测对Flexbox的一部分Flex-wrap CSS属性的支持，这在所有Flexbox实现中都不存在（特别是Firefox）。

这包括'tweener'语法（由IE10实现）和'modern'语法（由其他人实现）。只要支持flex-wrap属性，此检测将对这些实现中的任何一个返回true。因此，为了确保支持现代语法，请与Modernizr.flexbox一起使用：

Position