html – Flex项目无法在Safari中正确堆叠

概述参见英文答案 > Flexbox code working on all browsers except Safari. Why?                                    2个 我做了一个flex布局,其中四个列/盒在父div中并排放置.我在980px处添加了一个媒体查询,增加了列的宽度,并添加了一个flex-wrap,将两个右侧列推到一个新行上,创建一个2 x 2样 参见英文答案 > Flexbox code working on all browsers except Safari. Why?2个
我做了一个flex布局,其中四个列/盒在父div中并排放置.我在980px处添加了一个媒体查询,增加了列的宽度,并添加了一个flex-wrap,将两个右侧列推到一个新行上,创建一个2 x 2样式的布局.这适用于除Safari之外的所有浏览器,其结果非常难以预测.

小提琴：https://jsfiddle.net/gjy1t16p/6/

如果您在Chrome中查看此内容并将窗口拖动到980px以下,它将按照我上面描述的方式工作.然而,在Safari中,虽然我没有设法完全重新创建问题,但是盒子垂直堆叠.

正如我所提到的,结果是不可预测的 – 当在我的网站上实现时,布局实际上比我制作的小提琴更接近工作.在网站上,2 x 2布局有效,但前提是第四个框内没有文本/小部件.一旦它包含到达框的整个宽度的内容,它向下移动到第三个框的下面,就像我尝试在其后添加的任何其他框一样.

如果有人之前遇到过这个BUG并知道如何解决它,我会非常感激.我整天都在努力解决这个问题,而且我完全没有想法.

HTML：

<footer ><div ><div  ID="column-1">Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incIDIDunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div><div  ID="column-2">Lorem ipsum dolor sit amet,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div><div  ID="column-3">Lorem ipsum dolor sit amet,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div><div  ID="column-4">Lorem ipsum dolor sit amet,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div></div></footer>

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;}}

@H_502_19@解决方法 尝试使用flex等效项替换min-wIDth和max-wIDth声明.

而不是这个：

.footer-column {     min-wIDth: 20%;    max-wIDth: 20%;    margin-bottom: 40px;}.footer-column {    min-wIDth: 45% !important;    max-wIDth: 45% !important;    margin-bottom: 50px;}

试试这个：

.footer-column {     flex: 0 0 20%;    margin-bottom: 40px;}.footer-column {    flex: 0 0 45%;    margin-bottom: 50px;}

Revised Demo

@H_502_19@ @H_502_19@ 总结

以上是内存溢出为你收集整理的html – Flex项目无法在Safari中正确堆叠全部内容，希望文章能够帮你解决html – Flex项目无法在Safari中正确堆叠所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。