Microsoft Edge Flexbox 填充行为

Question

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

在 Microsoft Edge 中，5% padding-top 和 padding-bottom 被忽略。 display:flex 已应用于相关 div，并且它们具有百分比 padding-top 和 padding-bottom。

@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

所以有两种方法可以使这项工作。

1. 在.row div 上设置固定高度。
2. 使用<div>标签将所有子元素包裹在flex父元素中。

这是一个JSFIDDLE 显示两个示例

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

-- 更新

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

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

对于火狐

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

如果用户使用这两种方法中的一种，这将在 HTML 标记中添加一个类 .edge 或 .firefox，然后您可以添加特定的 CSS 以仅定位 Edge 或 FF。