Collage Web浏览器兼容性

时间:2018-09-19 17:30:48

标签: css cross-browser

在过去的一周中,我一直在研究拼贴画,终于使它起作用了,但据我所知,它在Chrome和Firefox上运行良好,但在Internet Explorer上存在问题。它根本不显示拼贴,而是显示拼贴应放置的空白区域。我不知道问题出在哪里。

https://codepen.io/anon/pen/zJyjZp

* {
box-sizing: border-box;
}

.contain-flexx {
min-height:600px;
position:relative;
overflow:hidden;
margin:0;
padding:0;
}

/* Create four equal columns that sits next to each other */
.flexx {
display:flex;
flex-flow: row wrap;
position:absolute;
left:0;
top:0;
}

.flexx img {
width:100%;
height:100%;
max-width: 100%;
}

.in-flexx{
flex-basis: calc(33.33333%);
position:relative;
}

@media only screen and (min-width:600px){
.in-flexx{
flex-basis: calc(20%);
}
}

@media only screen and (min-width:1400px){
.in-flexx{
flex-basis: calc(12.5%);
}
}

0 个答案:

没有答案