/ / Въпрос на Flexbox в браузъра Safari - css, safari, flexbox

Проблем с Flexbox в браузъра Safari - css, safari, flexbox

Аз повдигнах този въпрос преди, но имах малко коментари, че форматът на въпроса е неправилен, затова искам да му дам още един опит.

Имам проблем с моята flexbox в Safari Browser. Най- .div .memeber-card вътре в моя section припокриване при преглед на страницата в браузъра Safari.

Използвах уебсайт на Autoprefixer, който ми беше препоръчан на този сайт, но това не поправи проблема.

Може ли някой да има бърз поглед към моя CSS и да ми каже какъв е проблемът за Safari Browser?

section {
color: aliceblue;
width: 100%;
margin: 0 auto;

}

.members {
width: 50%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}

.member-card {
padding: 2%;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-flex-basis: 21%;
-ms-flex-preferred-size: 21%;
flex-basis: 21%;
margin-bottom: 5px
}


.member-image {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
text-align: center;
max-width: auto;
text-align: center;
display: block;
}


.team-body {
background-image:
-webkit-linear-gradient(bottom, whitesmoke, rgba(255,255,255,0) 99%), url("../img/team-2-page.jpg");
background-image:
linear-gradient(0deg, whitesmoke, rgba(255,255,255,0) 99%), url("../img/team-2-page.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 100% 0%;
}

/****Nav***/

.teamnav {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}

.teamnav ul {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}

.teamnav a {
text-decoration: none;
padding: 0 20px 0;
height: 70px;
line-height: 70px;
font-family: "Pontano Sans", Helvetica, Arial, sans-serif;
}

Изглед на браузъра Safari

Отговори:

1 за отговор № 1

Имах подобен проблем днес. Поправих го с помощта на основа с абсолютен размер, като 200px.

Може би опитайте нещо такова:

.member-card { flex-basis: 200px; }