проблема именно в сафари, почему то li идут лесенкой, в других браузерах такой проблемы не наблюдаю, в чем может быть проблема?
вот html
<div id="salon-filter" class="has-text" style="display: block;">
<div class="metro-select-list" style="display: flex;">
<ul>
<li>
<div></div>
<a href="/" target="_blank">
Все салоны
<span class="count"> (28)
</span>
</a>
</li>
<li>
<div>А</div>
<a href="/metro/aviamotornaya/" target="_blank">
<span> Авиамоторная</span>
<span> (1)</span>
</a>
</li>
<li>
<div></div>
<a href="/metro/avtozavodskaya/" target="_blank">
<span> Автозаводская</span>
<span> (1)</span>
</a>
</li>
<li>
<div></div>
<a href="/metro/aminevskoe-shosse/" target="_blank">
<span> Аминьевское шоссе</span>
<span> (1)</span>
</a>
</li>
<li>
<div></div>
<a href="/metro/arbatskaya/" target="_blank">
<span> Арбатская</span>
<span> (2)</span>
</a>
</li>
<li>
<div>Б</div>
<a href="/metro/baumanskaya/" target="_blank">
<span> Бауманская</span>
<span> (1)</span>
</a>
</li>
<li>
<div></div>
<a href="/metro/belorusskaya/" target="_blank">
<span> Белорусская</span>
<span> (1)</span>
</a>
</li>
<li>
<div>В</div>
<a href="/metro/vdnkh/" target="_blank">
<span> ВДНХ</span>
<span> (2)</span>
</a>
</li>
<li>
<div></div>
<a href="/metro/vorobevy-gory/" target="_blank">
<span> Воробьевы горы</span>
<span> (1)</span>
</a>
</li>
<li>
<div>К</div>
<a href="/metro/kitay-gorod/" target="_blank">
<span> Китай-город</span>
<span> (1)</span>
</a>
</li>
<li>
<div></div>
<a href="/metro/krasnye-vorota/" target="_blank">
<span> Красные ворота</span>
<span> (1)</span>
</a>
</li>
<li>
<div></div>
<a href="/metro/kropotkinskaya/" target="_blank">
<span> Кропоткинская</span>
<span> (1)</span>
</a>
</li>
<li>
<div>М</div>
<a href="/metro/mayakovskaya/" target="_blank">
<span> Маяковская</span>
<span> (1)</span>
</a>
</li>
<li>
<div></div>
<a href="/metro/myakinino/" target="_blank">
<span> Мякинино</span>
<span> (1)</span>
</a>
</li>
<li>
<div>Н</div>
<a href="/metro/novokuzneckaya/" target="_blank">
<span> Новокузнецкая</span>
<span> (1)</span>
</a>
</li>
<li>
<div></div>
<a href="/metro/novoslobodskaya/" target="_blank">
<span> Новослободская</span>
<span> (1)</span>
</a>
</li>
<li>
<div>П</div>
<a href="/metro/paveletskaya/" target="_blank">
<span> Павелецкая</span>
<span> (1)</span>
</a>
</li>
<li>
<div></div>
<a href="/metro/prospekt-mira/" target="_blank">
<span> Пр-кт Мира</span>
<span> (1)</span>
</a>
</li>
<li>
<div>Р</div>
<a href="/metro/rimskaya/" target="_blank">
<span> Римская</span>
<span> (1)</span>
</a>
</li>
<li>
<div>С</div>
<a href="/metro/smolenskaya/" target="_blank">
<span> Смоленская</span>
<span> (1)</span>
</a>
</li>
<li>
<div></div>
<a href="/metro/sokol/" target="_blank">
<span> Сокол</span>
<span> (1)</span>
</a>
</li>
<li>
<div>Т</div>
<a href="/metro/taganskaya/" target="_blank">
<span> Таганская</span>
<span> (1)</span>
</a>
</li>
<li>
<div></div>
<a href="/metro/turgenevskaya/" target="_blank">
<span> Тургеневская</span>
<span> (1)</span>
</a>
</li>
<li>
<div>Ц</div>
<a href="/metro/tsvetnoy-bulvar/" target="_blank">
<span> Цветной бульвар</span>
<span> (1)</span>
</a>
</li>
<li>
<div>Ч</div>
<a href="/metro/chistye-prudy/" target="_blank">
<span> Чистые пруды</span>
<span> (1)</span>
</a>
</li>
<li>
<div>Ш</div>
<a href="/metro/shabolovskaya/" target="_blank">
<span> Шаболовская</span>
<span> (1)</span>
</a>
</li>
</ul>
<div class="close-button-div"><a href="/" class="close-button">Свернуть</a></div>
</div>
<div class="region-select-list">
<ul>
<li>
<div></div>
<a href="/" target="_blank">
Все салоны
<span class="count"> (28)
</span>
</a>
</li>
<li>
<div>О</div>
<a href="/region/oktyabrskij/" target="_blank">
<span> Октябрьский</span>
<span> (1)</span>
</a>
</li>
</ul>
<div class="close-button-div"><a href="/" class="close-button">Свернуть</a></div>
</div>
</div>
вот ксс
#salon-filter {
width: 1200px;
position: absolute;
z-index: 21;
background: #ffffff;
top: 495px;
left: 50%;
transform: translate(-50%);
display: none;
border-top: 2px solid #E8E8E9;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
-webkit-box-shadow: 0px 11px 10px 2px rgb(34 60 80 / 20%);
-moz-box-shadow: 0px 11px 10px 2px rgba(34, 60, 80, 0.2);
box-shadow: 0px 11px 10px 2px rgb(34 60 80 / 20%);
}
.metro-select-list, .region-select-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
position: relative;
min-height: 50px;
width: 1200px;
margin: 28px auto;
display: none; - изначально он как display:none при раскрытии flex
}
.metro-select-list ul, .region-select-list ul {
column-count: 6;
padding: 0 20px;
width: 100%;
}
.metro-select-list ul li, .region-select-list ul li {
list-style: none;
margin-bottom: 10px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.metro-select-list ul li a, .region-select-list ul li a {
color: #D00025;
text-decoration: underline;
font-size: 14px;
display: flex;
}