Аз повдигнах този въпрос преди, но имах малко коментари, че форматът на въпроса е неправилен, затова искам да му дам още един опит.
Имам проблем с моята 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;
}
Отговори:
1 за отговор № 1Имах подобен проблем днес. Поправих го с помощта на основа с абсолютен размер, като 200px.
Може би опитайте нещо такова:
.member-card {
flex-basis: 200px;
}