Question

我正在尝试使用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/

我不确定如何处理这个问题。我可以浏览它，但我觉得有一种更清洁的方式。

Answer 1

IE在flexbox中存在很多渲染问题。

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

相反，请使用width: 100%。

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

https://www.moneysupermarket.com/loans/calculator/

IE中的Flexbox无法正确设置项目宽度

1 个答案: