多列在 ie 11 中不起作用答案

【问题标题】：multi columns not working in ie 11多列在 ie 11 中不起作用
【发布时间】：2014-03-20 23:12:34
【问题描述】：

这是我的 html 中的代码：

<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="portfolio.html">Portfolio</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="products.html">Products</a></li>
    <li><a href="contactme.html">Contact Me</a></li>
  </ul>
</nav>

这是我的 CSS：

nav {
    -moz-column-count: 2;
    -moz-column-gap: 1px;
    -moz-column-rule: 1px solid #000;
    -webkit-column-count: 2;
    -webkit-column-gap: 1px;
    -webkit-column-rule: 1px solid #000;    
    column-count: 2;
    column-gap: 1px;
    column-rule: 1px solid #000;
}
nav li {
    border-bottom: 1px solid #000;
    text-align:center;
}

当我在 IE 11 中查看此内容并将窗口大小调整为平板电脑大小（在 481 像素和 768 像素之间）时，导航变得很不稳定，但在 Firefox 和 Chrome 中运行良好。您可以在以下位置查看正在运行的页面：

http://gc.palomar.edu/33605/33605jknowles5799/index.html

我在网上到处都看过，这应该适用于 IE 11，因为 IE 11 支持多列，但事实并非如此。我尝试使用 IE 开发人员工具添加/删除内容以尝试弄清楚发生了什么，但我仍然没有看到它。

请帮忙！朱莉

【问题讨论】：

标签： css internet-explorer-11 multiple-columns

【解决方案1】：

在li 标签上设置样式overflow: hidden; 似乎可以解决这个问题。

【讨论】：

我有一个类似的问题，我有一堆 div 跨三列运行，并且一些 div 的顶部显示在前一列的末尾。很奇怪。将overflow: hidden; 添加到每个div 就可以了。第一次工作。
我在 IE11 和 Div 的多列列表中遇到了类似的问题。 overflow:hidden 在这种情况下也很有效。谢谢。
我还没有得到溢出：隐藏工作还没有......我也看到了@ColinJamesFirth 提到的问题，对于阴影我必须确保元素阴影不是太大并且填充足以防止它们在列之间交叉。