Вопросы совместимости с браузером CSS Flexbox

Question

Я использовал шаблон Flexbox для CSS3 для организации компонентов на веб-сайте. По большей части все работает отлично и, как ожидалось. Однако после тестирования веб-сайта на старом iPad (под управлением iOS версии 9.3.5 (не знаю, где найти версию Safari)), и в приложении «Интернет» от Samsung Edge 6, я обнаружил несколько проблем. Содержимое будет загружаться полностью, как и нижний колонтитул, но вместо содержимого, загружаемого наверху нижним колонтитулом внизу, нижний колонтитул, кажется, случайно загружается поверх содержимого (когда я говорю сверху, я не имею в виду в верхней части браузера).

Я тестировал веб-сайт на последних версиях Google Chrome и Microsoft Edge, а также на Mobile Safari для iPhone 5, Mobile Safari для iPhone 6 и Mobile Google Chrome от Samsung Edge 6; все работало, как ожидалось.

Я следовал за this учебным пособием (Flexbox) для организации компонентов.

Вот мой код (в том числе webkits и т.д. я думал, повысить совместимость):

html { 
    height: 100%; 
} 

body { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal; 
    -webkit-box-direction: normal; 
    -moz-box-direction: normal; 
    -webkit-flex-direction: column; 
    -ms-flex-direction: column; 
    flex-direction: column; 

    min-height: 100%; 
} 

.content { 
    -webkit-order: 1; 
    -ms-flex-order: 1; 
    order: 1; 
    -webkit-box-flex: 1; 
    -moz-box-flex: 1; 
    -webkit-flex: 1; 
    -ms-flex: 1; 
    flex: 1; 
} 

footer { 
    -webkit-order: 2; 
    -ms-flex-order: 2; 
    order: 2; 
} 

Я также добавил в свойстве «порядка», чтобы увидеть, если он не имел никакого влияния, но до сих пор ничего.

Так что мне интересно, есть ли решение для этого? Или, если нет, что мне делать в качестве приемлемого резерва для менее современных браузеров?

Спасибо,

Matthew

Answer 1

Если вы хотите взглянуть на соответствующие методы резервными, я хотел бы рассмотреть:

display: inline-block; 
vertical-align: top; 

Или, если вы хотите пойти глубже, вы могли бы использовать метод таблицы ,

Родительского элемент:

display: table; 

Детский элемент:

display: table-cell; 

Очевидно, потому что вы хотите прогибаются быть дисплеем элемента, и CSS быть каскадным вы можете применить, дисплея: таблица ; к элементу, не затрагивая новые браузеры:

.myElement{ 
    display:table; // Work on older - none support. 
    display: flex; // Work on newer browsers. 
} 

Как @Baruch указал в поддержку комментариев браузера все, и, к сожалению, старые браузеры не нравится прогибается.

Я бы также принял во внимание количество пользователей в определенном браузере, например, сколько людей фактически использует браузер samsung? Использование http://gs.statcounter.com/ будет большой помощью, если база пользователей будет низкой и проект не выделяет достаточно средств в бюджете, откажитесь от поддержки.

Или разрешите изящное ухудшение - страница никогда не может выглядеть одинаково в каждом браузере (это просто невозможно), однако, если страница пригодна для использования, и пользователь может получить информацию о том, в чем проблема?

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