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）都以正确的方式实现了这种行为

Percentage margins and paddings on flex items are always resolved against their respective dimensions; unlike blocks, they do not always resolve against the inline dimension of their containing block.

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 标签中添加 class .edge 或 .firefox 如果用户正在使用这两个标签之一，然后您可以添加特定的 CSS 仅针对 Edge 或 FF。

Microsoft Edge Flexbox 填充行为

Microsoft Edge Flexbox padding behavior

html

css

flexbox

microsoft-edge