multi columns not working in ie 11

Question

Here's the code in my 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>

And here's my 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;
}

When I view this in IE 11 and resize the window to tablet size (between 481px and 768px) the navigation gets all wonky, but works fine in Firefox and Chrome. You can see the page in action at:

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

I've looked online everywhere and this should work for IE 11 as IE 11 supports multi columns, but it's not. I've tried using the IE developer tools to add/remove stuff to try and figure out what's going on, but I'm still not seeing it.

Help please! Julie

Answer 1

Setting the style overflow: hidden; on the li tags seems to resolve this issue.