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

Question

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

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

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

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

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

但在IE11中,元素的宽度不正确,并且不会按预期居中.我认为这是因为在960px浏览器维度上,55%将max-width: 528px在<ul>元素上,但它也有min-width: 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版本可能已经破坏了已经有效的东西.

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

Answer 1

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

如果我们希望 959px 屏幕尺寸内的宽度为 90%，然后在 960px 屏幕尺寸后为 55%，我进行了计算以确定当<ul>屏幕在 960px 和 960px 之间时，我们希望元素宽度为 864px (960px x 90%) 1570 像素（864 像素/55%）。因此，对于这个尺寸范围，我强制将宽度和最大宽度设置为 864px。

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

使用这种方法，我可以完全忽略最小宽度。

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