如何解决 IE10 flexbox 溢出错误答案

【问题标题】：How to work around IE10 flexbox overflow bug如何解决 IE10 flexbox 溢出错误
【发布时间】：2017-01-10 21:23:17
【问题描述】：

有了这个结构

<div id="twitter">
  <div class="info">
    <div>
      <span>Tweets</span>
      <span class="count">561</span>
    </div>
    <div>
      <span>Followers</span>
      <span class="count">250</span>
    </div>
    <div>
      <span>Following</span>
      <span class="count">129</span>
    </div>
  </div>
</div>

还有这个 CSS

#twitter {
  width: 220px;
  padding: 10px;
  background: #10A4FA;
}
.info {
  display: flex;
  justify-content: space-around;
}
.info span {
  font-size: 14px;
}
.info span.count {
  font-size: 24px;
}

它在 IE11 和大多数浏览器中显示为顶部，但在 IE10 中显示为底部（在 IE11 开发工具中模拟）

Here is a codepen showing it.

我尝试将max-width: 100% 添加到.info，各种box-sizing 和flex-grow 的东西，并添加ms 前缀，但我无法让它在IE10 中运行

【问题讨论】：

你能在你的 span 后面加一个
吗？我还发现有时我必须在 flex 项目上设置宽度，加起来为 100% 才能让它们在旧 IE 中工作。
@kthornbloom 添加<br>s 确实有点作用（由于某种原因，它似乎与.info span { display:block; } 具有相同的效果）但结果3个div的定位略有不同跨度>
IE10 支持以前版本的 flexbox 规范，并且需要 供应商前缀。详情见这里：stackoverflow.com/a/35137869/3597276
@Michael_B 是的，但这似乎不是问题所在。如果您在 Codepen 中打开 autoprefixer，它不会修复它。我已经更新了问题以澄清这一点

标签： css internet-explorer flexbox internet-explorer-10

【解决方案1】：

试试这个

.info > div{
 width: 33.33%
{

因为在 IE10 中确实支持项目的 flex 宽度。所以把它的宽度设置为 33.33%

【讨论】：

这确实有效，但它稍微改变了 3 个 div 的位置（与它在例如 IE11 中的正常外观相比）