недавно начал изучать верстку и столкнулся с проблемой кроссбраузерности при верстке макета на флексах. На первом скриншоте показан список преимуществ который показывается в Internet Explorer, а на другом показывается как выглядит в других браузера, включая Edge. Еще у сайта в Internet Explorer после самого содержимого идет прокрутка далее, с белым фоном, хотя такого нет в других браузерах. Далее приложу код на HTML и Scss и чистом CSS если кому нужно
.features {
height: 690px;
}
.features_main {
display: flex;
flex-direction: row;
margin: 121px 47px 124px 47px;
}
.features_column {
display: flex;
flex-direction: column;
}
.features_column:nth-child(2) {
margin: 0 94px;
}
.features_item {
text-align: center;
}
.features_item:first-child {
margin-bottom: 94px;
}
.features_title {
font-family: "Raleway" sans-serif;
font-size: 14px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #2d3033;
margin: 34px 0 25px 0;
}
.features_text {
font-family: "Raleway" sans-serif;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.5;
letter-spacing: normal;
color: #6c7279;
}
.features {
height: 690px;
&_main {
display: flex;
flex-direction: row;
margin: 121px 47px 124px 47px;
}
&_column {
display: flex;
flex-direction: column;
&:nth-child(2) {
margin: 0 94px;
}
}
&_item {
text-align: center;
&:first-child {
margin-bottom: 94px;
}
}
&_title {
font-family: "Raleway" sans-serif;
font-size: 14px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #2d3033;
margin: 34px 0 25px 0;
}
&_text {
font-family: "Raleway" sans-serif;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.5;
letter-spacing: normal;
color: #6c7279;
}
<div class="features">
<div class="container">
<div class="features_main">
<div class="features_column">
<div class="features_item">
<div class="features_img">
<img src="images/features1.png" alt="">
</div>
<div class="features_title">
Easily Customised
</div>
<div class="features_text">
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla.
</div>
</div>
<div class="features_item">
<div class="features_img">
<img src="images/features4.png" alt="">
</div>
<div class="features_title">
Clean Code
</div>
<div class="features_text">
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla.
</div>
</div>
</div>
<div class="features_column">
<div class="features_item">
<div class="features_img">
<img src="images/features2.png" alt="">
</div>
<div class="features_title">
Responsive REady
</div>
<div class="features_text">
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla.
</div>
</div>
<div class="features_item">
<div class="features_img">
<img src="images/features5.png" alt="">
</div>
<div class="features_title">
Ready to Ship
</div>
<div class="features_text">
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla.
</div>
</div>
</div>
<div class="features_column">
<div class="features_item">
<div class="features_img">
<img src="images/features3.png" alt="">
</div>
<div class="features_title">
Modern Design
</div>
<div class="features_text">
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla.
</div>
</div>
<div class="features_item">
<div class="features_img">
<img src="images/features6.png" alt="">
</div>
<div class="features_title">
Download for Free
</div>
<div class="features_text">
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla.
</div>
</div>
</div>
</div>
</div>
</div>