1. Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела
    Скрыть объявление

[Помогите] Flex box в IE11+

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем AlexGood, 8 июн 2018.

  1. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    Подскажите что делать с Flex box в IE11+? Все что было сделано при помощи флексов в IE посыпалось :(
    --- Добавлено, 8 июн 2018 ---
    Или нужно просто хаки прописывать?
     
  2. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Что это? Нет никакого плюса: есть просто IE11 и Edge. В Edge проблем вообще быть не должно, в IE11 присутствуют некоторые баги с поддержкой флексбокса, но на "посыпалось" оно не тянет.
    А у Бутстрап 4 вообще заявлена поддержка даже IE10.


    В каком конкретно браузере вы тестировали и как выглядит результат?
     
    AlexGood нравится это.
  3. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    Да, все правильно! Я изначально перепутал Edge на win10 и думал что это IE из-за похожего значка. Потом прочитал что это за зверь.
    В edge все нормально http://testbcard.dtraduga.vh55.hosterby.com/index.php, только на самом малом разрешении какой-то косяк с отступами наверное?: http://joxi.ru/DrlVn55svpxP12 - я видимо какой-то общий padding уложил?
    А когда открыл то что делал на IE11, то понял что флексбокс не работает в нем и теперь думаю как с этим бороться? http://joxi.ru/1A5p4NNfngJel2
    Судя по всему надо прописывать хаки и под еджи и под эксплоер и по возможности отказаться от флексов где возможно.
    Можете подсказать проверенные хаки под эти браузеры?
     
    Последнее редактирование: 9 июн 2018
  4. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Во-первых, флексбокс в нём работает! Ищите другие причины.
    А во-вторых: на каком мобильном устройстве вы рассчитываете увидеть IE11? А если ни на каком, то зачем проверяете на минимальной ширине экрана?

    Весь Бутсрап 4 на флексбоксе! От флексбокса вы отказаться не сможете не переверстав всё с нуля.

    У меня не было необходимости использовать для них хаки.
     
    AlexGood нравится это.
  5. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    Посмотрите как у вас в IE смотрится: http://testbcard.dtraduga.vh55.hosterby.com/
    Особенно те блоки что я указывал на скрине - может у меня опять какие приколы с браузерами... хотя вроде все обновил
     
  6. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Не могу :Smile: Я уже лет 8 виндой не пользуюсь, только Линуксом.

    Я пользуюсь сервисами для тестирования.
    Вот вам тест в Edge, IE11, IE10 и IE9 (просто ради интереса) - https://www.browserstack.com/screenshots/3cb89d708f149beb33627a45895743d1112f076b

    В Edge и IE11 - никаких проблем нет. В IE10 вижу проблему с высотой слайдера (он схлопнулся).
    А вот IE9 - это пример браузера, где нет поддержки флексбокса. Там всё поплыло.
     
    AlexGood нравится это.
  7. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    Сразу сервис этот понравился и даже заинтересовал, но оказался полёный т.к. есть не соответствия, но не суть.
    Может кто подскажет что за прикол начинается на малых разрешениях на IE11?
    Все на сколько я понял, начинается на этих вкладках: http://joxi.ru/xAe0dzzhpo75M2
     
  8. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Ответьте на этот вопрос:
     
    AlexGood нравится это.
  9. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    Я ни на каком, но начальник проверяет на десктопе и выносит весь мозг :(
    Тупо сужает браузер на сколько он позволяет и начинается....
    А по Edge при максимальном сужении вот такая штука наблюдается: http://joxi.ru/MAjlKYYI40Eadm
    Это я общий отступ где-то положил?
     
    Последнее редактирование: 10 июн 2018
  10. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Попытайтесь его убедить, что на таких разрешениях в IE11 всё равно никто сайт смотреть не будет.
    Я могу помочь только этим советом :Smile: Тут нужно вживую ковырять страницу, а у меня такой возможности нет, ибо нет винды, но я уверен, что проблема не во флексбоксе, а непосредственно в ваших стилях (как, собственно, и все предыдущие).

    Я не могу понять, о каком отступе речь. На скрине сайт занимает всё пространство от края до края и даже немного не вмещается.
     
    AlexGood нравится это.
  11. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    Вот о том что немного не вмещается и говорю. Обрезан бургер на половину и отступа справа нет, он такой же как и слева у картинок должен быть.
     
  12. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Ищите там в инструментах разработчика, какой блок не может сжаться.
     
    AlexGood нравится это.
  13. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    Потестил другие сайты в edge, - это видимо прикол в самом баузере. Он нормально ужимает любой сайт адаптивный до своего минимального разрешения, а потом сам этих пикселей 20 съедает, - начиная со своего скролла. Ни одного сайта не нашел чтобы все нормально было когда его до упора сжимаешь.
     
  14. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    Вернулся к вопросу с IE11, все к той же проблеме: http://prntscr.com/jxlwgt (при листании закладок внизу главной страницы) Пока ничего не смог сделать, только если переверстывать при помощи float. Ещё нашел вот такую статейку: https://stackoverflow.com/questions...ce=google_rich_qa&utm_campaign=google_rich_qa
    Может кто-нибудь что-то сможет подсказать как можно решить данный вопрос с минимальными издержками?
    --- Добавлено, 21 июн 2018 ---
    Заметил если footer_all удаляешь то во вкладках все нормально отображается: http://prntscr.com/jxm78f - и даже адаптация вся работает.
    --- Добавлено, 21 июн 2018 ---
    http://prntscr.com/jxmvqn
    html,body - убираем height:100%; и все становится на свои места. Непонятно только для чего я вообще задавал там height:100%;