Вопрос по flexbox, css3 – IE гибкая модель коробки не работает

0

Я пытаюсь внедрить гибкую блочную модель в мой веб-сайт, и хотя она работает для -webkit-браузеров, таких как chrome и safari, других браузеров, таких как mozilla и opera, я не могу заставить ее работать в Internet Explorer, независимо от того, что я делать. Вот небольшой фрагмент моего файла таблицы стилей Css, содержащий мой класс .holder, в котором хранится все, и мой идентификатор #new_div, являющийся дочерним для .holder, и мой основной раздел для сообщений и боковой панели.

.holder
{
    width:100%;
    margin:auto;
    display:-webkit-box;
    display:-o-box;
    display:-ms-box;
    display:-box;
    display:-pie;
    -webkit-box-orient:vertical;
    -moz-box-orient:vertical;
    -o-box-orient:vertical;
    -ms-box-orient:vertical;
    -box-orient:vertical;
    -pie-box-orient:vertical;
    -moz-box-flex:1;    /* Firefox, seamonkey etc */
    -o-box-flex:1;      /* Opera */
    -ms-box-flex:1;     /* MSIE */
    -box-flex:1;         /* Any that support full implementation */
    -pie-box-flex:1;
    -webkit-box-flex:1;
    -webkit-box-pack:center;
    -o-box-pack:center;
    -ms-box-pack:center;
    -pie-box-pack:center;
    -box-pack:center; 
    text-align:center;
    behavior: url(../../Content/pie/PIE.htc);
}

.holder #new_div
{
    width:940px;
}
.holder div
{
    -webkit-box-pack:center;
    -o-box-pack:center;
    -ms-box-pack:center;
    -box-pack:center; 
    -pie-box-pack:center;
    behavior: url(../../Content/pie/PIE.htc);
}
#new_div
{
    margin:auto;
    display:-webkit-box;
    display:-moz-box;
    display:-o-box;
    display:-ms-box;
    display:-box;
    display:-pie-box;
    text-align:left;
    -webkit-box-flex:1;
    -moz-box-flex:1;    /* Firefox, seamonkey etc */
    -o-box-flex:1;      /* Opera */
    -ms-box-flex:1;     /* MSIE */ 
    -box-flex:1; 
    -pie-box:1;     
    -webkit-box-pack:center;
    -box-pack:center;
    -moz-box-pack:center;
    -o-box-pack:center;
    -ms-box-pack:center; 
    -pie-box-pack:center;
    background-color:#25282D;
    -webkit-box-orient:horizontal;
    -moz-box-orient:horizontal;
    -o-box-orient:horizontal;
    -ms-box-orient:horizontal;
    -box-orient:horizontal;
    -pie-box-orient:horizontal;
    min-width:940px; 
    padding:20px;
    behavior: url(../../Content/pie/PIE.htc);
}

Там вы можете видеть, что у меня есть имена -ms-box- .., определенные вместе с другими определениями, однако он все еще не регистрируется. Я пытался использовать библиотеку CSS3Pie от отчаяния, хотя это не сработало, попытался установить плагин Chrome для IE, хотя это тоже не удалось, и я просто не знаю, что делать, ребята. Может быть, может быть проблема с синтаксисом css, который я уже написал, который отбрасывает его, но, как я уже сказал, он отлично работает в других браузерах. Любые предложения или советы?

Возможный дубликатCSS flexbox не работает в IE10 TylerH
Поддержка браузера Flexbox:stackoverflow.com/a/35137869/3597276 Michael_B

Ваш Ответ

1   ответ
5

IE не используетустаревшие свойства Flexbox 2009, он использует те из устаревшихМарт 2012 проект, Опера поддерживаетСтандарт Flexbox свойства без префиксов и свойства 2009 с префиксом -webkit-.

.holder {
  width: 100%;
  margin: auto;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  text-align: center;
}

.holder #new_div {
  width: 940px;
}

.holder div {
  /* justify-content does nothing here since this element isn't a flex container */
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

#new_div {
  margin: auto;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  text-align: left;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  /* this shouldn't be necessary, as the default direction is `row` */
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  min-width: 940px;
  padding: 20px;
}

Также стоит отметить, что для этого требуется IE10 +

Просто чтобы прояснить ситуацию, добавьте столбец justify-content: кроме выпуска за март 2012 года вместе с flex direction? И с префиксами -webkit- и -moz- orient: горизонтальный, что больше не нужно и заменяется на столбец? Извините за преждевременные ответы на вопросы, я все еще новичок в потоке css3 вещей. Dezmen Ceo Sykes
Спасибо брат!!! Ценю помощь и поддержку, я бы никогда не знал об этом! Dezmen Ceo Sykes
Какие свойства вам нужны, зависит от того, на какие браузеры вы хотите настроить таргетинг. Firefox еще не перешел на использование стандартных свойств, он все еще застрял в 2009 году. То же самое касается Safari и всех браузеров мобильных веб-приложений, кроме Blackberry 10.gist.github.com/cimmanon/727c9d558b374d27c5b6 cimmanon

Похожие вопросы