0

проблема именно в сафари, почему то 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">&nbsp;(28)
                            </span>
    
    
                                                                        </a>
                                </li>
                                                        <li>
                                                                        <div>А</div>
                                                                    <a href="/metro/aviamotornaya/" target="_blank">
                                       <span> Авиамоторная</span>
                                        <span>&nbsp;(1)</span>
                                    </a>
                                </li>
                                                                                    <li>
                                                                        <div></div>
                                                                    <a href="/metro/avtozavodskaya/" target="_blank">
                                       <span> Автозаводская</span>
                                        <span>&nbsp;(1)</span>
                                    </a>
                                </li>
                                                                                    <li>
                                                                        <div></div>
                                                                    <a href="/metro/aminevskoe-shosse/" target="_blank">
                                       <span> Аминьевское шоссе</span>
                                        <span>&nbsp;(1)</span>
                                    </a>
                                </li>
                                                                                    <li>
                                                                        <div></div>
                                                                    <a href="/metro/arbatskaya/" target="_blank">
                                       <span> Арбатская</span>
                                        <span>&nbsp;(2)</span>
                                    </a>
                                </li>
                                                                                    <li>
                                                                        <div>Б</div>
                                                                    <a href="/metro/baumanskaya/" target="_blank">
                                       <span> Бауманская</span>
                                        <span>&nbsp;(1)</span>
                                    </a>
                                </li>
                                                                                                                                <li>
                                                                        <div></div>
                                                                    <a href="/metro/belorusskaya/" target="_blank">
                                       <span> Белорусская</span>
                                        <span>&nbsp;(1)</span>
                                    </a>
                                </li>
                                                                                    <li>
                                                                        <div>В</div>
                                                                    <a href="/metro/vdnkh/" target="_blank">
                                       <span> ВДНХ</span>
                                        <span>&nbsp;(2)</span>
                                    </a>
                                </li>
                                                                                    <li>
                                                                        <div></div>
                                                                    <a href="/metro/vorobevy-gory/" target="_blank">
                                       <span> Воробьевы горы</span>
                                        <span>&nbsp;(1)</span>
                                    </a>
                                </li>
                                                                                    <li>
                                                                        <div>К</div>
                                                                    <a href="/metro/kitay-gorod/" target="_blank">
                                       <span> Китай-город</span>
                                        <span>&nbsp;(1)</span>
                                    </a>
                                </li>
                                                                                    <li>
                                                                        <div></div>
                                                                    <a href="/metro/krasnye-vorota/" target="_blank">
                                       <span> Красные ворота</span>
                                        <span>&nbsp;(1)</span>
                                    </a>
                                </li>
                                                                                                                                <li>
                                                                        <div></div>
                                                                    <a href="/metro/kropotkinskaya/" target="_blank">
                                       <span> Кропоткинская</span>
                                        <span>&nbsp;(1)</span>
                                    </a>
                                </li>
                                                                                    <li>
                                                                        <div>М</div>
                                                                    <a href="/metro/mayakovskaya/" target="_blank">
                                       <span> Маяковская</span>
                                        <span>&nbsp;(1)</span>
                                    </a>
                                </li>
                                                                                    <li>
                                                                        <div></div>
                                                                    <a href="/metro/myakinino/" target="_blank">
                                       <span> Мякинино</span>
                                        <span>&nbsp;(1)</span>
                                    </a>
                                </li>
                                                                                    <li>
                                                                        <div>Н</div>
                                                                    <a href="/metro/novokuzneckaya/" target="_blank">
                                       <span> Новокузнецкая</span>
                                        <span>&nbsp;(1)</span>
                                    </a>
                                </li>
                                                                                    <li>
                                                                        <div></div>
                                                                    <a href="/metro/novoslobodskaya/" target="_blank">
                                       <span> Новослободская</span>
                                        <span>&nbsp;(1)</span>
                                    </a>
                                </li>
                                                                                                                                <li>
                                                                        <div>П</div>
                                                                    <a href="/metro/paveletskaya/" target="_blank">
                                       <span> Павелецкая</span>
                                        <span>&nbsp;(1)</span>
                                    </a>
                                </li>
                                                                                    <li>
                                                                        <div></div>
                                                                    <a href="/metro/prospekt-mira/" target="_blank">
                                       <span> Пр-кт Мира</span>
                                        <span>&nbsp;(1)</span>
                                    </a>
                                </li>
                                                                                    <li>
                                                                        <div>Р</div>
                                                                    <a href="/metro/rimskaya/" target="_blank">
                                       <span> Римская</span>
                                        <span>&nbsp;(1)</span>
                                    </a>
                                </li>
                                                                                    <li>
                                                                        <div>С</div>
                                                                    <a href="/metro/smolenskaya/" target="_blank">
                                       <span> Смоленская</span>
                                        <span>&nbsp;(1)</span>
                                    </a>
                                </li>
                                                                                    <li>
                                                                        <div></div>
                                                                    <a href="/metro/sokol/" target="_blank">
                                       <span> Сокол</span>
                                        <span>&nbsp;(1)</span>
                                    </a>
                                </li>
                                                                                                                                <li>
                                                                        <div>Т</div>
                                                                    <a href="/metro/taganskaya/" target="_blank">
                                       <span> Таганская</span>
                                        <span>&nbsp;(1)</span>
                                    </a>
                                </li>
                                                                                    <li>
                                                                        <div></div>
                                                                    <a href="/metro/turgenevskaya/" target="_blank">
                                       <span> Тургеневская</span>
                                        <span>&nbsp;(1)</span>
                                    </a>
                                </li>
                                                                                    <li>
                                                                        <div>Ц</div>
                                                                    <a href="/metro/tsvetnoy-bulvar/" target="_blank">
                                       <span> Цветной бульвар</span>
                                        <span>&nbsp;(1)</span>
                                    </a>
                                </li>
                                                                                    <li>
                                                                        <div>Ч</div>
                                                                    <a href="/metro/chistye-prudy/" target="_blank">
                                       <span> Чистые пруды</span>
                                        <span>&nbsp;(1)</span>
                                    </a>
                                </li>
                                                                                    <li>
                                                                        <div>Ш</div>
                                                                    <a href="/metro/shabolovskaya/" target="_blank">
                                       <span> Шаболовская</span>
                                        <span>&nbsp;(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">&nbsp;(28)
                            </span>
    
    
                                                                        </a>
                                </li>
                                                        <li>
                                                                        <div>О</div>
                                                                    <a href="/region/oktyabrskij/" target="_blank">
                                       <span> Октябрьский</span>
                                        <span>&nbsp;(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;
}
5
  • autoprefixer.github.io/ru вот этой штукой воспользуйтесь, ваш код туда скопипасьте и от туда результат в свой style.css 2 июл 2021 в 2:07
  • @MaximLensky не помогло
    – reddyk
    2 июл 2021 в 2:12
  • Дело не во флексе - дело в column-count + ul li. Не знаю, почему у Вас только в Сафари проблема - у меня и в других браузерах так список отображается, потому что отступы между li переносятся в соседние колонки, и получается лесенка 2 июл 2021 в 5:22
  • @humster_spb у вас наверно на маке так, смотрите если я убираю margin-bottom:10px и вметсо него делаю padding-bottom: то он идет лесенкой, как это можно исправить?
    – reddyk
    2 июл 2021 в 5:39
  • > в чем может быть проблема? - в самом существовании Сафари. Следует как можно скорее забыть об этом браузере и сосредоточить силы на нормальных. 2 июл 2021 в 12:44

1 ответ 1

0

Я могу предложить свою версию кода (как бы сделал я).

Я бы дописал следующие стили

.metro-select-list{
    max-height: 250px;
    
}
.metro-select-list ul{
    
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-between;
    ///  column-count: 6; Если вам конечно не принципиально чтобы у вас было именно 6 колонн
}
1
  • важно, т.к. будут города в которых 3-4 салона и они только слева будут
    – reddyk
    2 июл 2021 в 7:44

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.