Question

我有CSS的这一部分，我在Chrome和Safari上遇到问题，即使整个CSS文件都以Autoprefixer为前缀（并使用Pleeeease进行了双重检查）。有什么线索的原因？它应该是2个在行上具有弹性行为的盒子（.deuxcases），并且每个盒子在列上都有一个弹性行为（2 x .case），但是在Chrome和Safari上它们都是一个长杂乱的行，只能在Firefox浏览器。我使用的是Chrome 50和Safari 8.0.2。谢谢

.deuxcases {
margin-top: 70px;
max-height: 60vh;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient:horizontal;
-webkit-box-direction:normal;
-webkit-flex-direction:row;
    -ms-flex-direction:row;
        flex-direction:row;
-webkit-flex-wrap:nowrap;
    -ms-flex-wrap:nowrap;
        flex-wrap:nowrap;
-webkit-box-pack:justify;
-webkit-justify-content:space-between;
    -ms-flex-pack:justify;
        justify-content:space-between;
}

.case {
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-pack:center;
-webkit-justify-content:center;
    -ms-flex-pack:center;
        justify-content:center;
-webkit-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
        flex-wrap:wrap;
-webkit-box-flex:1;
-webkit-flex:1;
    -ms-flex:1;
        flex:1;
padding:auto;
margin:10%;
height: auto;
min-width: 25vw;
box-shadow: .5em .5em .5em .5em #aaa;
}

Answer 1

您应该尝试将height和width设置为显式值，而不是auto。后者在浏览器中的工作方式不一致，这也是您为什么要在这种布局上挣扎的原因。

只需将.case课程的高度设置为100%而不是auto，它就会按预期工作。

像这样：

.case {
    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-pack:center;
    -webkit-justify-content:center;
        -ms-flex-pack:center;
            justify-content:center;
    -webkit-flex-wrap:wrap;
        -ms-flex-wrap:wrap;
            flex-wrap:wrap;
    -webkit-box-flex:1;
    -webkit-flex:1;
        -ms-flex:1;
            flex:1;
    padding:auto;
    margin:10%;
    height: 100%;
    min-width: 25vw;
    box-shadow: .5em .5em .5em .5em #aaa;
}

即使使用前缀，Chrome和Safari上的CSS问题也是如此

1 个答案: