Question

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

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

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

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

这似乎适用于所有Chrome，Firefox，Safari和IE10。

但在IE11中，元素的宽度不正确，并且不会按预期居中。我认为这是因为在浏览器维度为960px时，<ul>元素上的55％为min-width: 864px，但它也有<div class="progress-bar"> <ul> <li>Test item</li> <li>Test item</li> <li>Test item</li> <li>Test item</li> </ul> </div>。出于某种原因，IE11将其定位为左侧（而不是中心），宽度为528px。所以IE11似乎忽略了min-width属性，它不像其他浏览器那样处理它。

代码示例：

的index.html：

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%;
  }
}

的style.css：

db.SaveChanges()

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

任何想法如何解决这个问题？

Answer 1

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

如果我们想要90％宽度达到959px的屏幕尺寸，那么在960px屏幕尺寸后55％ - 我做了计算以确定我们希望<ul>元素宽度为864px（960px x 90）当屏幕在960px和1570px之间时（864px / 55％）。因此，对于此尺寸范围，我强制宽度和最大宽度为864px。

然后，对于大于1571px的屏幕，55％的弹性箱继续再次应用。

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

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

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

1 个答案: