根据CanIUse.com，display:contents在各种浏览器中都具有一定的支持。
https://caniuse.com/#feat=css-display-contents
我想在支持的浏览器中启用该功能，并在不支持的浏览器中禁用该功能。
因此，我使用CSS.supports('display', 'contents');来确定是否受支持。在IE11中，我必须进行额外检查，因为不支持CSS。
但是，我的期望是在Safari11中应返回true，在Safari10中应返回false。取而代之的是两个都返回true。 UI显然在11中看起来是正确的，但是在10中，由于display: contents实际上不起作用，因此会产生不良影响，因此我的补丁程序类未应用且UI看起来不正确。确认这是由无效特征检测引起的。
我搜索了可检测Safari10（而不是Safari11）的解决方案，但找不到任何有效的方法。
如何从JavaScript准确判断是否支持此功能/我在Safari 10中？
最佳答案
这是一个解决方案：
@supports (display: contents) and (not (-webkit-flow-from: main)) {
/**/
}
display: contents -check仅在Safari 11之前引起一个错误的标志，因此我一直在caniuse上浏览CSS值并找到CSS Regions，只有Edge 18（最后一个版本）的MS浏览器才支持版本不使用Chrome的渲染引擎）和Safari版本（最高为11.IE）不支持@supports，而Edge不支持-webkit-flow-from。顺便说一句，由于我没有任何Apple产品，因此我没有对此进行测试。如果有人可以做到，那将是很棒的。
关于javascript - Safari 10 CSS.supports('display'，'contents')返回true，即使它不受支持吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51072444/