IE 11 在使用弹性宽度时忽略最小宽度

Question

我想知道是否有人可以帮助解决这个问题。我花了很多时间在上面，但我完全没有想法，我尝试了 Google 结果的各种建议，各种 flex 增长和收缩的组合，但无法让它工作。

演示： https://embed.plnkr.co/dIPh53W4DBkmTB51DCHp/（用IE 11打开）

编辑代码： https://plnkr.co/edit/dIPh53W4DBkmTB51DCHp?p=preview

在这种情况下，在平板电脑视图中，<ul> 弹性宽度应为 90%，但在桌面视图中，<ul> 弹性宽度应仅为 55%。但是，我们不希望桌面视图中的 <ul> 比平板视图中的短，因此我们在桌面视图的 <ul> 上设置了 min-width: 864px。因此，如果您在 950px 和 970px 之间调整屏幕大小，<ul> 不应再突然缩小。

这似乎在所有 Chrome、Firefox、Safari 和 IE10 中都能正常工作。

但在 IE11 中，元素的宽度不正确，无法按预期居中。我认为这是因为在 960 像素的浏览器尺寸下，<ul> 元素上有 55% 是 max-width: 528px，但它也有 min-width: 864px。出于某种原因，IE11 将其呈现为位于左侧（而不是中心），宽度为 528px。所以IE11似乎忽略了最小宽度属性，它不像其他浏览器那样处理它。

代码示例：

index.html:

<div class="progress-bar">
  <ul>
    <li>Test item</li>
    <li>Test item</li>
    <li>Test item</li>
    <li>Test item</li>
  </ul>
</div>

style.css:

div {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

ul {
  display: flex;
  flex: 1 1 90%;
  max-width: 90%;

  margin: 0;
  padding: 0;
  list-style-type: none;
}

li {
  display: flex;
  flex: 1 1 0%;
  justify-content: center;

  margin: 0;
  padding: 12px 0;
  list-style-type: none;
  background: #f7f7f7;
}

@media (min-width: 960px) {
  ul {
    min-width: 864px !important;
    flex-basis: 55%;
    max-width: 55%;
  }
}

IE 10 在这种情况下实际上工作正常，所以 IE 11 版本似乎可能破坏了一些已经在工作的东西。

知道如何解决这个问题吗？

Answer 1

由于在 IE11 中似乎无法解决此问题，因此我添加了一个临时媒体查询来更改特定维度的行为。

如果我们希望 90% 宽度达到 959px 屏幕尺寸，然后 55% 在 960px 屏幕尺寸之后——我计算确定我们希望 <ul> 元素宽度为 864px (960px x 90%）当屏幕在 960px 和 1570px 之间（864px / 55%）。所以对于这个尺寸范围，我强制宽度和最大宽度为 864px。

然后对于大于 1571px 的屏幕，flexbox 55% 继续再次应用。

用这个方法，我完全可以忽略min-width

@media (min-width: 960px) and (max-width: 1570px) {
  ul {    
    flex-basis: 100%;
    max-width: 864px;
    width: 864px;
  }
}

IE 11 在使用弹性宽度时忽略最小宽度

IE 11 ignores min-width when using flex width

css

internet-explorer

flexbox

internet-explorer-11