Question

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

.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>

Answer 1

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

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

Answer 2

明确设置width: calc(100%);，以便IE知道盒子宽度并正确居中。

Answer 3

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

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

IE 11问题与flexbox项目的最大宽度

3 个答案: