多列不工作即11

Question

这是我的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中查看此内容并将窗口大小调整为平板电脑大小(介于481px和768px之间)时,导航变得非常糟糕,但在Firefox和Chrome中运行良好.您可以在以下位置查看该页面:

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

我到处看都在线,这应该适用于IE 11,因为IE 11支持多列,但事实并非如此.我已经尝试使用IE开发人员工具来添加/删除内容以尝试找出正在发生的事情,但我仍然没有看到它.

请帮忙!朱丽叶

Answer 1

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