显示：带有列表导航 IE11 的 flex答案

【问题标题】：Display: flex with list navigation IE11显示：带有列表导航 IE11 的 flex
【发布时间】：2017-11-22 20:07:09
【问题描述】：

我已经搜索和搜索并尝试了很多东西，但我对自己正在做的事情没有足够的把握来找出我哪里出了问题。

我有一个清单。

    <div class="topNav">
        <ul>
            <li><a href="MODL.html" title="HSE">HSE</a></li>
            <li><a href="MODL-PROC.html" title="PROCESSING">PROCESSING</a></li>
            <li><a href="MODL-UG.html" title="UNDERGROUND">UNDERGROUND</a></li>
        </ul>
        <br>
</div>

和css

.topNav {
justify-content: center;
text-align: center;
}

.topNav ul {
  background: #eee;
  list-style-type: none;
  margin: auto;
  padding: 0;
  display: flex;
  justify-content: center;
  width: 80%;
}
.topNav a {
  color: #333;
  display: block;
  text-decoration: none;
  text-align: center;
  padding: 1rem 2rem;
}

.topNav a:hover {
  background: #d4d4d4;
}

@media all and (max-width: 600px) {
 .topNav ul {
    flex-flow: column wrap;
    padding: 0;
  }
}

它完全符合我在 Chrome 中的要求。但是 IE11 将每个列表项一个一个地堆叠在一起。到目前为止，我无法让它们连续运行。

CSS 中没有其他内容会影响 ul/li，只有 text-align:center;和 height:100% 设置为身体。

任何帮助或指导将不胜感激。

山姆

【问题讨论】：

在我的 IE 11 中，提供的代码一切正常。也许有其他东西在干扰？ jsfiddle.net/767x4qf8/1
这里相同，因为支持 display:flex，所以代码在 IE11 中可以正常工作
哦，真的吗？这可以解释很多..任何想法可能导致我的问题？
哈哈！这让我头疼！这就是我想要的，在 Chrome 中运行良好 - imgur.com/h9hHv3Z 但任何版本的 IE（通过 F12 仿真） - imgur.com/T9FrcGe 都不行
好的，进一步测试 - JSFiddle 在我的 IE 中运行良好。诡异的。如果我更改 IE 开发人员工具中的“文档模式”，我可以让它完美地在文档模式 10 和 11 下工作。我不知道这是在告诉我什么

标签： css internet-explorer flexbox display

【解决方案1】：

我遇到了同样的问题。

使用

display:inline-flex;

解决了。

【讨论】：