CSS Chrome 和 Safari 上的问题,即使有前缀
CSS Problems on Chrome and Safari even with prefixes
我有 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;
}
您应该始终尝试将 height
和 width
设置为明确的值,而不是 auto
。后者在不同浏览器中的工作方式不一致,这就是您为这种布局苦苦挣扎的原因。
只需将 .case
class 上的高度设置为 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;
}
我有 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;
}
您应该始终尝试将 height
和 width
设置为明确的值,而不是 auto
。后者在不同浏览器中的工作方式不一致,这就是您为这种布局苦苦挣扎的原因。
只需将 .case
class 上的高度设置为 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;
}