Eu levantei essa questão antes, mas tinha poucos comentários de que o formato da pergunta estava incorreto, então quero tentar novamente.
Eu tenho problemas com meu flexbox no Safari Browser. o .div .memeber-card dentro do meu section sobreposição ao visualizar a página no navegador Safari.
Eu usei um site Autoprefixer, que foi recomendado para mim neste site, mas isso não resolveu o problema.
Alguém pode dar uma rápida olhada no meu CSS, e me diga, qual é o problema do 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;
}
Visualização do navegador Safari
Respostas:
1 para resposta № 1Eu tive um problema semelhante hoje. Eu consertei usando uma base com um tamanho absoluto como 200px.
Talvez tente algo assim:
.member-card {
flex-basis: 200px;
}