IE 中的 Flexbox 未正确设置项目宽度答案

【问题标题】：Flexbox in IE doesn't set item widths correctlyIE 中的 Flexbox 未正确设置项目宽度
【发布时间】：2017-10-10 00:57:06
【问题描述】：

我正在尝试使用 flexbox 在 div 中适当地分隔一些项目。

<div class="container">
    <ul class="action-box">
        <li class="long-item">Some cool info That needs to be on 2 lines</li>
        <li><a>Do a thing</a></li>
        <li><a>Do a different thing</a></li>
    </ul>
    <div>
      <a>
        Do something different
      </a>
    </div>
</div>

我正在尝试使所有项目的大小相同。

我尝试设置flex-basis，它可以在 chrome 中使用，但在 IE 中会严重中断。

https://jsfiddle.net/w71t2247/7/

我还尝试在长项目上设置max-width，它在 IE 中有效，但在 chrome 中偏离中心。

https://jsfiddle.net/w71t2247/8/

我不确定如何处理。我可以浏览器破解它，但我觉得有一种更清洁的方法。

【问题讨论】：

同时使用 both max-width 和 flex-basis？
jsfiddle.net/w71t2247/9 仍然没有居中，但至少跨浏览器保持一致

标签： html css internet-explorer flexbox

【解决方案1】：

IE 对 flexbox 有很多渲染问题。

在这种情况下，flex-basis: 100% 似乎是问题所在。

改为使用width: 100%。

li {
  /* flex-basis: 100%; */
  width: 100%; /* new */
}

https://jsfiddle.net/w71t2247/12/

【讨论】：