具有最大宽度的 flexbox 项的 IE 11 问题答案

【问题标题】：IE 11 issue with flexbox item with max-width具有最大宽度的 flexbox 项的 IE 11 问题
【发布时间】：2015-08-16 14:38:18
【问题描述】：

在 IE 11 中，如果项目具有最大宽度属性，则它们不能正确居中。但是，此示例适用于 Chrome 和 Firefox。

JS Bin

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: blue;
  width: 100%;
}

.red {
  background-color: red;
  flex-grow: 1;
  display: flex;
  max-width: 200px;
}

<div class="container">
  <div class="red">non centered box</div>
</div>

【问题讨论】：

有问题吗？

标签： html css internet-explorer flexbox

【解决方案1】：

这是一个错误。但是根据IE Feedback 应该已经修复了。

作为一种解决方法，如果您不必使用 flex-grow: 1;，可以将其删除。

【讨论】：

他们说只在Edge中固定，当时除了安全之外，他们不关心IE，忘记了。
非常感谢，这真的让我很烦。

【解决方案2】：

显式设置 width: calc(100%); 以便 IE 知道框宽度并将其正确居中。

【讨论】：

为什么在这里使用 calc()？

【解决方案3】：

我也遇到过这个问题。就我而言，我想要flex-grow，但仍想限制max-width。我所做的是包装任何我不希望 IE11 在@support 中看到的 css。 IE11 不支持此规则，完全忽略其内容。我只会检查一些像 text-align 这样一直存在的东西，以便所有其他现代浏览器都可以应用 css 规则。你可以为任何事情做这件事，我只是在试图找出这个问题的答案时发现了这一点。

@supports(text-align:center) {
    div {
        max-width: 350px;
    }
}

【讨论】：

所以这就是说，“如果我是 IE，不要应用 max-width”，如果你仍然想限制 max-width（大概也在 IE 中），这对 IE 有什么作用，哪个支持最大宽度？我不理解这里的例子，我想呵呵:)
@SidOfc IE 不支持@supports()，因此它会跳过其中的任何 CSS 规则。 text-align:center 是所有浏览器都支持的任意 css 规则。所以可以使用@supports 的浏览器会应用代码，IE不会。
啊，对，只是显示任意一行 CSS 来解释如何让 IE 跳过某些样式，为澄清欢呼！