CSS Flexbox некорректен для Firefox и IE

Я недавно разрабатывал сайт с использованием flexbox и делал это в Chrome. Сайт отлично подходит для Chrome (и Safari, по словам пользователей), однако он имеет некоторые серьезные проблемы при просмотре в Firefox и IE. Я попытался найти в Интернете документацию о том, какие префиксы должны включать в мой CSS и как сделать это нормальным в этих браузерах, но я действительно не могу найти суммирование или учебник в любом месте. Вот пример моего CSS кода, содержащий flexboxs, которые не отображаются правильно на Firefox и IE -CSS Flexbox некорректен для Firefox и IE

.header { 
    padding: 12px; 
    padding-top: 10px; 
    padding-bottom: 0px; 
    margin: 0px; 

    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 

    -webkit-flex-flow: row wrap; 
    justify-content: space-around; 
    height: 70px; 
    background-color: #000000; 
} 

.header-box { 
    padding-left: 15px; 
    padding-right: 15px; 
    margin: 0; 

    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 

    -webkit-flex-flow: row wrap; 
    align-content: flex-start; 
    align-items: flex-start; 
    height: 70px; 
    width: 1170px; 
    background-color: #000000; 
}

Этот код для панели заголовка вдоль верхней части сайта. Я подумал, включив в него display: -moz-box; и такой, который позволил бы его увидеть в Firefox, но форматирование перепутано в том смысле, что поле не центрировано, а вместо него по левой стороне экрана, а поля в заголовке все они расположены вверху родительского контейнера, а не внизу. Благодарим вас за понимание, которое может возникнуть по этой проблеме!

источник

2015-06-05 Marko

Firefox поддерживает 'display: flex' с версии 20, вам не нужно' display: -moz-box'. И, пожалуйста, напишите свой html. См. [Как создать минимальный, полный и проверенный пример] (http://stackoverflow.com/help/mcve). – Oriol

Спасибо за быстрый ответ, я думаю, что я нашел одного из виновников - он лежит с линией '-webkit-flex-flow: row wrap;'. Добавление другой строки только «flex-flow: wrap wrap;» исправляет некоторые проблемы с форматированием для Firefox, по крайней мере, что заставляет меня думать, что у меня, вероятно, есть много команд форматирования с префиксом -webkit-, которые firefox не может читать – Marko

Да, я просто написал это в ответ. '-webkit-' является префиксом поставщика, не ожидайте, что все браузеру это узнает. Всегда включайте стандартную, непереработанную версию. – Oriol

В работает только на WebKit браузерах, потому что вы используете только

-webkit-flex-flow: row wrap;

Вы должны использовать стандартный

flex-flow: row wrap;

В противном случае, начальное значение row nowrap будет использоваться вместо этого.

источник

2015-06-05 16:01:25 Oriol

CSS Flexbox некорректен для Firefox и IE

ответ

Смежные вопросы