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似乎可以解决此问题。

多列不工作即11

1 个答案: