html - 如何在IE中的列中显示ul列表？

Question

我在三列中有一个无序列表：

    ul#menu-referenzen {
list-style:none;
-moz-column-count: 3;
-moz-column-gap: 50px;
-webkit-column-count: 3;
-webkit-column-gap: 50px;
column-count: 3;
column-gap: 50px;
}
ul#menu-referenzen li { 
    display:block;
    text-align:center;
    border:1px solid #f00; 
    padding: 2% 5% 2% 5%;
    font-weight:600;
    background-color: rgba(255, 255, 255, 0.7);     
    color:#333;
    padding:10px;
    margin-bottom:10px;
}    
    ul#menu-referenzen li.current-cat a { color:#333; background-color:rgba(235, 234, 102, 0.8);    }
    ul#menu-referenzen li.cat-item a:hover {    background-color: rgba(235, 234, 102, 0.8); }

<div class="fullwidth-referenzen">
        <nav class="fullwidth-menu-referenzen">
            <ul id="menu-referenzen" class="fullwidth-menu nav downwards">
                <li class="cat-item cat-item-30"><a href="#" >Büro &amp; Verwaltung</a></li>
                <li class="cat-item cat-item-36"><a href="#" >Gesundheitswesen</a></li>
                <li class="cat-item cat-item-31"><a href="#" >Gewerbe &amp; Industrie</a></li>
                <li class="cat-item cat-item-34"><a href="#" >Pflegeheime</a></li>
                <li class="cat-item cat-item-33"><a href="#" >Schulen &amp; Kitas</a></li>
                <li class="cat-item cat-item-32"><a href="#" >Verkaufsstätten</a></li>
                <li class="cat-item cat-item-35"><a href="#" >Versammlungsstätten</a></li>
                <li class="cat-item cat-item-29"><a href="#" >Wohnen</a></li>
             </ul>
        </nav>
    </div> 

当我添加margin-bottom:10px;以便在列表项之间留出一些空间时，它可以在Firefox和Chrome中运行，但不能在IE11中运行。

我该怎么做才能解决此问题？


编辑：

谢谢你的帮助。我将其更改为网格布局。这适用于Firefox，但不适用于IE。我不知道为什么？

ul#menu-referenzen {
list-style:none;
display:grid;
-ms-grid-template-rows:50px 50px 50px; 
-ms-grid-template-columns:33% 33% 33%; 
-ms-grid-auto-flow: column; 
-ms-grid-row-gap: 20px; 
-ms-grid-column-gap: 10px;
-ms-align-items:center;

grid-template-rows:50px 50px 50px; 
grid-template-columns:33% 33% 33%; 
grid-auto-flow: column; 
grid-row-gap: 20px; 
grid-column-gap: 10px;
align-items:center;
}

将语法更改为：(display: -ms-grid; and to -ms-grid-rows / -ms-grid-columns)，但这也不起作用。

Answer 1

我尝试将padding-bottom：1px添加到ul#menu-referenzen li {}类。对于我来说，不仅在chrome和firefox上还对IE都很好。

ul#menu-referenzen li { 
   display:block;
   text-align:center;
   border:1px solid #f00; 
   padding: 2% 5% 2% 5%;
   font-weight:600;
   background-color: rgba(255, 255, 255, 0.7);  
   color:#333;
   padding:10px;
   margin-bottom:10px;
   padding-bottom:1px
}   

希望能帮助到你