弹性基础对IE11的百分比支持？

Question

我对flexbox和ie10/11有一个问题。我想使用最小宽度/最大宽度值，但这在IE11中行不通。我发现了弹性基数，我用了一个百分比值。

在Chrome中，它的工作原理与预期一样，但在IE11中则不然。

我试着添加挠性方向的行和列，但它也不起作用。

​

/* List */

.c-collist {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  /*width: -webkit-fill-available;*/
  margin: 0 auto;
}


/* Listitem */

.c-collist>li {
  position: relative;
  flex-basis: 45%;
  flex-shrink: 0;
  margin: 0 auto;
  padding: 1rem;
  text-align: center;
}

<h4>Features</h4>
<ul class="c-collist t-name">
  <li>
    <img src="/pics/icon/e-5w92w-05-grww-000.svg" width="100" height="100" alt="Schalten" />
    <div class="c-flextext">
      <h5>Schalten</h5>
      <p>Ihr Smartphone wird genauso zur Schalt&shy;zentrale wie der Browser Ihres PCs. Je nach Modell schaltet das Web-IO in klassischer 24V Automatisierungs&shy;technik, mit potential&shy;freien Kontakten oder direkt 230V.</p>
    </div>
  </li>
  <li>
    <img src="/pics/icon/mqtt.svg" width="64" height="64" alt="IoT-Gateway" />
    <div class="c-flextext">
      <h5>MQTT und REST</h5>
      <p>Durch die Unterstützung von MQTT und REST ist das Web-IO 4.0 ideal vorbereitet für IoT-Lösungen und Industrie 4.0.</p>
    </div>
  </li>
  <li>
    <img src="/pics/icon/e-5w92w-08-grww-000.svg" width="100" height="100" alt="Melden" />
    <div class="c-flextext">
      <h5>Alarmierung</h5>
      <p>Ein potentialfreier Kontakt oder Grenzwert&shy;schalter reicht aus, damit das Web-IO im Ernstfall per E-Mail die zuständigen Mitarbeiter informiert. Weitere Alarmierungs&shy;möglichkeiten sind SNMP-Trap, TCP-Meldung, MQTT-Publish und mehr.</p>
    </div>
  </li>
</ul>

​

是我在Chrome上得到的东西：

​

​

，这是IE11

​

​

当我使用像素值为250 of时，它在IE11中工作。但是我有一个媒体查询，它将手机的宽度设置为100%。这也不起作用，我真的不喜欢为移动设置一个明确的像素值。

Answer 1

为了安全地使用IE11，您应该坚持最基本的原则。

这应该工作得很好：

​

/* List */

.c-collist {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  
  list-style-type: none;
  padding: 0;
}


/* List item */

.c-collist li {
  width: 45%;
  padding: 1rem;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .c-collist li {
    width: 100%;
    margin: 0 auto;
    max-width: 520px;
  }
}

<h4>Features</h4>
<ul class="c-collist t-name">
  <li>
    <img src="/pics/icon/e-5w92w-05-grww-000.svg" width="100" height="100" alt="Schalten" />
    <div class="c-flextext">
      <h5>Schalten</h5>
      <p>Ihr Smartphone wird genauso zur Schalt&shy;zentrale wie der Browser Ihres PCs. Je nach Modell schaltet das Web-IO in klassischer 24V Automatisierungs&shy;technik, mit potential&shy;freien Kontakten oder direkt 230V.</p>
    </div>
  </li>
  <li>
    <img src="/pics/icon/mqtt.svg" width="64" height="64" alt="IoT-Gateway" />
    <div class="c-flextext">
      <h5>MQTT und REST</h5>
      <p>Durch die Unterstützung von MQTT und REST ist das Web-IO 4.0 ideal vorbereitet für IoT-Lösungen und Industrie 4.0.</p>
    </div>
  </li>
  <li>
    <img src="/pics/icon/e-5w92w-08-grww-000.svg" width="100" height="100" alt="Melden" />
    <div class="c-flextext">
      <h5>Alarmierung</h5>
      <p>Ein potentialfreier Kontakt oder Grenzwert&shy;schalter reicht aus, damit das Web-IO im Ernstfall per E-Mail die zuständigen Mitarbeiter informiert. Weitere Alarmierungs&shy;möglichkeiten sind SNMP-Trap, TCP-Meldung, MQTT-Publish und mehr.</p>
    </div>
  </li>
</ul>

​