Как отобразить список ul в столбцах в IE? - PullRequest
Новая
       18

Как отобразить список ul в столбцах в IE?

0 голосов
/ 29 апреля 2019

У меня есть неупорядоченный список в трех столбцах: 

    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.

Что я могу сделать, чтобы это исправить?enter image description here

РЕДАКТИРОВАТЬ:

Спасибо за вашу помощь.Я изменил это на grid-макет.Это работает для 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), но это тоже не сработало.

Ответы [ 5 ]

0 голосов
/ 30 апреля 2019

Спасибо за вашу помощь. Я изменил это на grid-макет. Это работает для 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;

}

0 голосов
/ 30 апреля 2019

Похоже, что другие браузеры настраивают элементы, но IE не настраивает элементы таким же образом.

если возможно, вы можете просто добавить еще один тег LI . Так что теперь каждый столбец имеет 3 LI тегов, и в IE он будет выглядеть правильно. 

<!DOCTYPE html>
<html>
<head>
	<title>Page Title</title>
	<style>
	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;
  
    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); }
	</style>
</head>
<body>
<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>
		 <li class="cat-item cat-item-29"><a href="#" >Wohnen</a></li>
             </ul>
        </nav>
    </div> 


</body>
</html>

Вывод в IE 11:

enter image description here

Кроме того, вы можете изменить код CSS, чтобы он правильно отображался при динамическом добавлении элементов.

0 голосов
/ 29 апреля 2019

Я думаю, учитывая текущий уровень поддержки сетки CSS, это, вероятно, ваша лучшая ставка (см. Покрытие сетки CSS здесь: https://caniuse.com/#search=grid). Для этого IE11 необходим префикс -ms-.

Просто используйте display: grid в родительском элементе вместе с grid-template-columns. Если вам нужен обязательный интервал между элементами, вы можете использовать свойства grid-column-gap и grid-row-gap в родительском элементе. Дочерние элементы делаютне нужно менять в вашем случае, просто определите сетку, которую вы хотите в родительском элементе, и вы готовы к работе. Я также предлагаю использовать Firefox Developer Edition, если вы можете для тестирования, так как он имеет подсветку вида сетки в своих инструментах разработчикаи очень помогает при первом запуске с сеткой CSS.

Просто определите столбцы и строки, которые будут распределены на основе количества и размеров дочерних элементов.

Для получения дополнительной информации о CSSgrid это проверить: https://css -tricks.com / snippets / css / complete-guide-grid . 

ul#menu-referenzen {
list-style:none;
display: grid;
grid-template-columns: 3fr;
grid-column-gap: 10px;
grid-row-gap: 10px;
-ms-grid-template-columns: 3fr;
-ms-grid-column-gap: 10px;
-ms-grid-row-gap: 10px;
}
0 голосов
/ 30 апреля 2019

Попробуйте этот CSS добавить в li 

.li{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
 column-count: 3;

-webkit-column-gap: 10px; /* Chrome, Safari, Opera */
-moz-column-gap: 10px; /* Firefox */
 column-gap: 10px;
 }
0 голосов
/ 29 апреля 2019

Я попытался добавить 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
}

надеюсь, это поможет

...