Microsoft Edge Flexbox填充行为 [英] Microsoft Edge Flexbox padding behavior

问题描述

我刚刚完成了这个网站： http://groepsmanager-rspo.com 。

I just completed this website: http://groepsmanager-rspo.com. It renders perfectly in modern browsers such as Chrome 47 and Internet Explorer 11.

在Microsoft Edge中，5％ padding-top 和 padding-bottom 被忽略。 display：flex 已应用于所讨论的div，它们有一个百分比padding-top和padding-bottom。

In Microsoft Edge, the 5% padding-top and padding-bottom are ignored. display:flex has been applied to the divs in question, and they have a percentage padding-top and 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？
是否有一种方法可以专门针对这个问题？

Now, is Edge interpreting flexbox wrongly? Is there a way to target this problem specifically?

如果没有，是否有一种方法可以通过Modernizr检测，如果客户端浏览器是Edge，在这些情况下使用除 display：flex 之外的其他东西？

If not, is there a way to detect via Modernizr if the client browser is Edge, so as to use something other than display: flex in those cases?

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

Please note that Modernizr indicates that Edge has support for display: flex.

提前感谢。

推荐答案

实际上MS Edge（和FF）方式

Actually MS Edge (and FF) both are implementing this behavior the correct way

flex项目的边距和边框的百分比总是按照它们各自的维度来解析
;不像块，他们不总是
解决它们包含块的内联维度。

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

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

So there are 2 ways to make this work.

1. 在 .row div上设置固定高度。


2. 使用< div> 标签将所有子项包含在flex parent中。

1. Set a fixed height on the .row div.
2. Wrap all children inside the flex parent with <div> tags.

这里是 JSFIDDLE 显示两个考试

Here is a JSFIDDLE showing both examles

两者都有优点和缺点，由你决定你最喜欢的解决方案。

Both have advantages and disadvantages and it's up to you to decide which solution you feel like is best.

- UPDATE

要使用Modernizr检测您需要的浏览器添加一些JS以通过调用 Modernizr.addTest

To use Modernizr to detect the browser you need to add some JS to create your own feature detect by calling Modernizr.addTest

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

和FireFox

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

这将添加一个类 .edge .firefox 到HTML标记，如果用户使用2中的一个，然后你可以添加特定的CSS目标只是边缘或FF。

This will add a class .edge or .firefox to the HTML tag if the user is using one of the 2 and then you can add specific CSS to target just Edge or FF.

这篇关于Microsoft Edge Flexbox填充行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！