@sunnyrio

Как сделать чтоб flexbox заработал на google chrome?

Создал flexbox контейнер а также блоки внутри него, почему на firefox работает а на google chrome нет?
Сам код:

<DIV class="flex_menu_container">
      <DIV class="flex_menu_blocknull">&nbsp</DIV>
      <DIV class="flex_menu_block"><FONT class="flex_menu_font">Главная и каталог</FONT></DIV>
      <DIV class="flex_menu_block"><FONT class="flex_menu_font">О нас</FONT></DIV>
      <DIV class="flex_menu_block"><FONT class="flex_menu_font">Доставка и оплата</FONT></DIV>
      <DIV class="flex_menu_block"><FONT class="flex_menu_font">Контакты</FONT></DIV>
      <DIV class="flex_menu_blocknull">&nbsp</DIV>
    </DIV>


CSS:

.flex_menu_font
{
  color:white;
  font-size:20px;
  font-weight:300;
  font-family:AntiquaBold, sans-serif;
  line-height:25px;
  padding: 0px 0px 0px 30px;
}
.flex_menu_container
{
    display:flex;

position:fixed;left:50%;margin-left:-408px;z-index:999;
height: 30px;
width: 800px;
flex-direction: row;
justify-content: center;
align-items: flex-start;
  background: #507299;
  border: 3px solid black;
}
.flex_menu_block
{
height: 30px;
flex-basis: auto;
flex-grow: 2;
margin: auto;
  background: #507299;
}
.flex_menu_blocknull
{
height: 30px;
flex-basis: auto;
flex-grow: 2;
margin: auto;
  background: #507299;
}
.flex_menu_block:hover
{
background-color: #81BEF7;
font-color: white;
}


FireFox:
54d07124486842b5abd4a1dd3fb98fa8.png

Google Chrome:
b39d0ef12a014ebc915eb7d9aee45598.png
  • Вопрос задан
  • 1052 просмотра
Решения вопроса 2
delphinpro
@delphinpro Куратор тега CSS
frontend developer
В хроме флексы работают. А у вас, похоже, просто стили закэшированы. F12 - Network - Disable cache - F5
20161124-190107.png
Ответ написан
zooks
@zooks
Frontend и Django
1. Теги в HTML принято писать строчными буквами.
2. Меню нужно делать через маркированные списки ul - li
3. Тег font является устаревшим и не рекомендуется к использованию.
4. В CSS нужно делать отступы. Каждое новое правило с новой строки. Иначе эту кашу даже рассматривать не хочется.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@GreatRash
Посмотрел на ваш код, возникли вопросы:

1) Доктайп прописан?
2) Почему все теги капсом?
3) Почему используете устаревший <font>?
4) Для чего нужны blocknull?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы