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

我想知道是否有人可以帮助解决这个问题.我花了很多时间在它上面,我完全没有想法,我已经尝试了谷歌搜索结果的各种建议,各种灵活增长和缩小的组合,并且无法让它发挥作用.

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

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

在这种情况下,在平板电脑视图中,< ul> flex宽度应为90％,但在桌面视图中< ul>柔性宽度应仅为55％.但是,我们不希望< ul>在桌面视图中比在平板电脑视图中更短,因此我们在< ul>上设置最小宽度：864px用于桌面视图.因此,如果您在950px和970px之间调整屏幕大小,则< ul>不应该再突然缩小.

这似乎适用于所有Chrome,Firefox,Safari和IE10.

但在IE11中,元素的宽度不正确,并且不会按预期居中.我认为这是因为在960px的浏览器维度上,55％将是最大宽度：< ul>上的528px.元素,但它也有最小宽度：864px.出于某种原因,IE11将其定位为左侧(而不是中心),宽度为528px.所以IE11似乎忽略了min-width属性,它不像其他浏览器那样处理它.

代码示例：

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版本可能已经破坏了已经有效的东西.

有什么想法可以解决这个问题吗？

解决方法

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

在我们想要90％宽度到959px屏幕尺寸的情况下,然后在960px屏幕尺寸后55％ – 我做了计算以确定我们想要< ul>当屏幕在960px和1570px(864px / 55％)之间时,元素宽度为864px(960px x 90％).因此,对于此尺寸范围,我强制宽度和最大宽度为864px.

然后对于大于1571px的屏幕,55％的flexbox继续再次应用.

使用这种方法,我可以完全忽略min-width.

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