Ich frage mich, ob jemand bei diesem Problem helfen kann. Ich habe viel Zeit damit verbracht und keine Ideen mehr. Ich habe verschiedene Vorschläge aus den Google-Ergebnissen ausprobiert und verschiedene Kombinationen von Flexwachstum und -schrumpfung getestet. Es hat nicht funktioniert.

Demo https: //embed.plnkr.co/dIPh53W4DBkmTB51DCHp (mit IE 11 öffnen)

Bearbeiten Sie den Code: https: //plnkr.co/edit/dIPh53W4DBkmTB51DCHp? p = preview

In diesem Fall wird in der Tablettansicht das<ul> flex width sollte 90% betragen, aber in der Desktop-Ansic<ul> flex width sollte nur 55% betragen. Wir wollen jedoch nicht das<ul> in der Desktop-Ansicht kürzer als in der Tablet-Ansicht, daher setzen wir einmin-width: 864px auf<ul> für die Desktop-Ansicht. Wenn Sie also die Größe des Bildschirms zwischen 950px und 970px ändern, wird das<ul> sollte nicht mehr plötzlich schrumpfen.

Dies scheint in allen Chrome-, Firefox-, Safari- und IE10-Umgebungen problemlos zu funktionieren.

Aber in IE11 hat das Element die falsche Breite und wird nicht wie erwartet zentriert. Ich denke, es ist, weil bei 960px Browser-Dimension, 55% wäremax-width: 528px auf der<ul> Element, aber es hat auchmin-width: 864px. Aus irgendeinem Grund wird dies in IE11 als links (anstelle der Mitte) mit einer Breite von 528 Pixel dargestellt. IE11 scheint also die Eigenschaft min-width zu ignorieren, es behandelt sie nicht wie die anderen Browser.

Code Beispiel:

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 funktioniert in diesem Fall tatsächlich einwandfrei. Es scheint also, dass die IE 11-Version möglicherweise etwas kaputt gemacht hat, das bereits funktioniert hat.

Haben Sie eine Idee, wie dies gelöst werden kann?