参见英文答案 >
Flexbox code working on all browsers except Safari. Why?2个
我做了一个flex布局,其中四个列/盒在父div中并排放置.我在980px处添加了一个媒体查询,增加了列的宽度,并添加了一个flex-wrap,将两个右侧列推到一个新行上,创建一个2 x 2样式的布局.这适用于除Safari之外的所有浏览器,其结果非常难以预测.
如果您在Chrome中查看此内容并将窗口拖动到980px以下,它将按照我上面描述的方式工作.然而,在Safari中,虽然我没有设法完全重新创建问题,但是盒子垂直堆叠.
正如我所提到的,结果是不可预测的 – 当在我的网站上实现时,布局实际上比我制作的小提琴更接近工作.在网站上,2 x 2布局有效,但前提是第四个框内没有文本/小部件.一旦它包含到达框的整个宽度的内容,它向下移动到第三个框的下面,就像我尝试在其后添加的任何其他框一样.
如果有人之前遇到过这个bug并知道如何解决它,我会非常感激.我整天都在努力解决这个问题,而且我完全没有想法.
HTML：
CSS：
.footer {
height: auto;
width: 100%;
background-color: #efefef;
display:-webkit-Box;
display:-webkit-flex;
display:-ms-flexBox;
display:flex;
-webkit-Box-orient: vertical;
-webkit-Box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-Box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.footer-container {
width:85%;
height:inherit;
margin-top:60px;
overflow:hidden;
display:-webkit-Box;
display:-webkit-flex;
display:-ms-flexBox;
display:flex;
-webkit-Box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.footer-column {
min-width:20%;
max-width:20%;
margin-bottom:40px;
}
#column-1 {background-color:red}
#column-2 {background-color:yellow}
#column-3 {background-color:blue}
#column-4 {background-color:green}
@media only screen
and (min-width : 0px)
and (max-width : 980px) {
.footer-container {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-Box-orient: horizontal;
-webkit-Box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
.footer-column {
margin-bottom:50px;
min-width:45% !important;
max-width:45% !important;
}
}
121
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
