Нужно ли использовать Modernizr

224

16 сентября 2018, 05:10

Раньше при верстке сайта я использовал Modernizr для поддержки старых версией браузеров . Последное время заметил глюки. Сайт неработал в старых браузерах. Можете подсказать какие варианты есть без использования Modernizr. Можно сделать так . И есть такая роблема с Flexbox float несовместим .Для этого есть решения

    <div class="parent FlexContainer BorderBox BlockContainer">
      <div class="child FlexContainer BlockContainer TextAlignCenter "><h1>Child</h1></div>
      <div class="child FlexContainer BlockContainer TextAlignCenter "><h1>Child</h1></div>
      <div class="child FlexContainer BlockContainer TextAlignCenter "><h1>Child</h1></div>
      <div class="child FlexContainer BlockContainer TextAlignCenter "><h1>Child</h1></div>
            </div>
<style type="text/css">
.parent{
   width:100%;
   height:100%;
   position:fixed;
   top:0;
   left:0;
}
.FlexCountainer{
   display:flex;
   flex-flow:row wrap;
   align-items:center;
   justify-content:center;
}
.BorderBox{
   box-sizing:border-box;
}
.BlockContainer{
 display:block;
}
.child{
   width:20em;
   padding:5em 1em 5em 1em;
   margin:0.2em;
}
.TextAlignCenter{
  text-align:center;
  }

</style>

Answer 1

Нашел оптимальный вариант .Вот

<style type="text/css">
.parent{
   width:100%;
   height:100%;
   position:fixed;
   top:0;
   left:0;
}
.FlexCountainer{
   display:flex !important;
   flex-flow:row wrap !important;
   align-items:center !important;
   justify-content:center !important;
}
.BorderBox{
   box-sizing:border-box;
}
.BlockContainer{
 display:block;
}
.child{
   width:20em;
   padding:5em 1em 5em 1em;
   margin:0.2em;
   float:left;
}
.TextAlignCenter{
  text-align:center;
  }

</style>