Question

我刚刚完成了这个网站：http://groepsmanager-rspo.com。它在Chrome 47和Internet Explorer 11等现代浏览器中完美呈现。

在Microsoft Edge中，将忽略5％padding-top和padding-bottom。 display:flex已应用于相关div，并且它们具有填充顶部和填充底部的百分比。

@media only screen and (min-width: 768px) {
  .row {
    display: flex;
  }
  .twothird, .threethird, .onethird, .onehalf, .onefourth, .threefourth, .twofourth {
    padding: 5%; // Padding-top and -bottom are ignored?
  }
}

现在，Edge是否错误地解释了flexbox？有没有办法专门针对这个问题？

如果没有，有没有办法通过Modernizr检测客户端浏览器是否为Edge，以便在这些情况下使用display: flex之外的其他内容？

请注意，Modernizr表示Edge支持display: flex。

提前致谢。

Answer 1

实际上MS Edge（和FF）都以正确的方式实现了这种行为

始终解决弹性项目上的百分比边距和填充违背各自的规模;与块不同，它们并不总是如此解决其包含块的内联维度。

source: dev.w3.org

因此，有两种方法可以完成这项工作。

在.row div。
使用<div>标记将Flex父级中的所有子项包裹起来。

这是一个显示两个考试的JSFIDDLE

两者都有优点和缺点，由您来决定您认为哪种解决方案最好。

- 更新

要使用Modernizr检测浏览器，您需要添加一些JS以通过调用Modernizr.addTest来创建自己的功能检测

Modernizr.addTest('edge', function () {
  return !!navigator.userAgent.match(/edge/i);
});

和FireFox

Modernizr.addTest('firefox', function () {
  return !!navigator.userAgent.match(/firefox/i);
});

如果用户使用其中一个，则会向HTML标记添加一个类.edge或.firefox，然后您可以添加特定的CSS以仅定位到Edge或FF。

Microsoft Edge Flexbox填充行为

1 个答案: