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
}   

希望对你有帮助