0

Помогите, пожалуйста, исправить неработающий flex на сафари.

Во всех браузерах все отлично работает, а в сафари что-то не получается. Версия Safari 5.1.7 (7534.57.2)

Блоки не смещаются вниз совсем, все 6 штук в строку располагаются и, соответственно, появляется горизонтальная прокрутка.

Как "подружить" стили с safari? На первом рис - от, что отображается в сафарина втором - как должно быть

После прогона через автопрефиксер я получила такой код, который не дает нужного результата:

      <!-- Стили для меню картинками-->
.container {all: initial;}

.wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
	text-align: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
	-ms-flex-item-align: center;
	    align-self: center;
}

.choice {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background-image: url(Plan.jpg);
  width: 200px;
  height: 250px;
  margin: 5px;
  border: 1px solid #D3D3D3;
  text-align: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.justify-content-between { 
  -webkit-box-pack: center; 
      -ms-flex-pack: center; 
          justify-content: center;
 } 

 .flex-wrap {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
 }


.container { width: 80%; margin: 0 auto; 
			inherit: none;} 

 .d-flex { display: -webkit-box; display: -ms-flexbox; display: flex; }
	
	
	break{
  -ms-flex-preferred-size: 100%;
  -webkit-flex-basis: 100%;  
      flex-basis: 100%;
  width: 0px; 
  height: 0px; 
  overflow: hidden;
}
	
  @media screen and (max-width: 1505) .line-break {  width: 100%;}
 
  @media screen and (
	  max-width: 1488) {
		  .line-break {
  width: 0%;}
  .container {inherit: none; 
	  width: 40%;
	  max-width: 1200 px;
	  margin: 0 auto; } 
}
 
  @media screen and (max-width: 1100) {
  .container {inherit: none;
	  width: 95%;}
	  nav {-ms-flex-line-pack:  center;align-content:  center;}
	  .wrapper {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
    -ms-flex-direction:column;
        flex-direction:column;
		
	-ms-flex-item-align: center;
		
	    -ms-grid-row-align: center;
		
	    align-self: center;
}
}
	@media screen and (max-width: 1487) {
		break {display: none;}
	}
	
	
	@media screen and (min-width: 1488 and max-width: 2193) {
		section: nth-child(3n) 
		 after;
	}
      
      <!--Конец стилей меню-картинками -->
<div class="container">
          <nav class="wrapper d-flex justify-content-between flex-wrap">
            <section class="choice" onclick="location.href='http://www.baseflat.ru/database.html';">
              <figure>
                <h3><a href="">Последнее обновление</a></h3>
                <br>
                <img src="Today-final.jpg" alt="Все квартиры за сегодня"> <figcaption>Адреса
                  и описания / Все варианты за сегодня</figcaption> </figure>
            </section>
            <section class="choice" onclick="location.href='http://www.baseflat.ru/area.html';">
              <figure>
                <h3 class="select"><a href="">По районам СПб</a></h3>
                <br>
                <img src="Metro-distr-final.jpg" alt="Квартиры по районам и метро">
                <figcaption>Длительная аренда по районам и метро</figcaption> </figure>
            </section>
            <section class="choice" onclick="location.href='http://www.baseflat.ru/sut.html';">
              <section class="line-break"></section>
              <figure>
                <h3><a href="">Посуточные квартиры</a></h3>
                <br>
                <img src="Sutochno-final.jpg" alt="Аренда на несколько дней"> <figcaption>
                  Квартиры в аренду на короткие сроки</figcaption> </figure>
            </section>
            <section class="choice" onclick="location.href='http://www.baseflat.ru/database.html';">
              <figure>
                <h3><a href="">Однокомнатные квартиры</a></h3>
                <br>
                <img src="1KKV-final.jpg" alt="Снять однокомнатную квартиру в СПб">
                <figcaption>Снять однокомнатную квартиру в СПб</figcaption> </figure>
            </section>
            <section class="choice" onclick="location.href='http://www.baseflat.ru/area.html';">
              <figure>
                <h3><a href="">Двухкомнатные квартиры</a></h3>
                <br>
                <img src="2KKV-final.jpg" alt="Снять двухкомнатную квартиру в СПб">
                <figcaption>Снять двухкомнатную квартиру в СПб </figcaption> </figure>
            </section>
            <section class="choice" onclick="location.href='http://www.baseflat.ru/sut.html';">
              <figure>
                <h3><a href="">Трехкомнатные квартиры и более</a></h3>
                <br>
                <img src="3KKV-final.jpg" alt="Снять трех-, четырехкомнатную квартиру в СПб">
                <figcaption> Снять трехкомнатную, четырехкомнатную ...</figcaption>
              </figure>
            </section>
          </nav>
        </div>

Помогите, чем можете, люди добрые!

8
  • 1
    Покажите скриншот ожидаемого результата (из другого браузера), скриншот из сафари и версию сафари (а то я не совсем уверен, что пойму код правильно без скриншотов)
    – andreymal
    30 окт 2018 в 18:21
  • Последняя версия Safari для Windows вышла ШЕСТЬ лет назад, очень устарела и не имеет никакой поддержки flex. Просто забейте на этот браузер и ничего не делайте, его никто не использует (кроме вас)
    – andreymal
    30 окт 2018 в 18:29
  • А! Хорошо, если так. Я сейчас проверю в эмуляторах мобильных устройств. Идея была в том, чтобы в сафари на мобильниках все было адаптивно. 30 окт 2018 в 18:33
  • 1
    А ещё в любом случае префиксы у вас не те (если точнее, они слишком старые), вместо display: -webkit-box; должно быть display: -webkit-flex; и остальное тоже требует исправления
    – andreymal
    30 окт 2018 в 18:34
  • 1
    Про фильтры в документации модуля browserlist, который и используется этим автопрефиксером
    – andreymal
    30 окт 2018 в 19:07

1 ответ 1

1

С помощью andreymal - участника комментариев к вопросу удалось добиться приемлемого вида даже на десктопном safari для windows.

Вендорные префиксы, полученные на сайте https://autoprefixer.github.io/ru/ с фильтром Safari >= 7, плюс найденные на просторах сети свойства для выравнивания по горизонтали в этом проблемном браузере:

{
    text-align:-moz-center;
    text-align:-webkit-center;
}

практически решили мою проблему. Осталась задача по адаптации под сафари псевдоклассов, но это решительно не критично, просто перфекционист во мне проснулся.

Ваш ответ

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

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