无法让 flexbox 在 IE/Safari 中工作
Can't get flexbox to work in IE/Safari
这一切在 Chrome 在我的 MBP 上完美运行,但在其他浏览器上无休止地中断。我已经使用 https://autoprefixer.github.io/ 来生成必要的前缀,但无济于事。
也许有人能发现我哪里出错了?我去掉了带前缀的代码,因为我不知道现在影响了什么,所以它有点空白……这是代码和相关的屏幕截图
由于此处嵌套 div 的差异太多,因此修改了代码。订单将是 parent > child 等..
.recommendation-modal {
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: flex-start;
background: #FFFFFF;
z-index: 202;
width: 100%;
max-width: 800px;
height: 70vh;
.rec-right--container {
display: flex;
flex-direction: column;
flex: 1;
width: 100%;
height: 100%;
background-color: #4B77BE;
color: #fff;
.rec-right--body {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
padding: 20px;
height: 100%;
@media (max-width: $screen-sm) {
flex-direction: row;
}
最后只需要添加旧语法,我基本上只是找到了所有可能的旧语法,然后将它们放入其中,直到它起作用为止...
这一切在 Chrome 在我的 MBP 上完美运行,但在其他浏览器上无休止地中断。我已经使用 https://autoprefixer.github.io/ 来生成必要的前缀,但无济于事。
也许有人能发现我哪里出错了?我去掉了带前缀的代码,因为我不知道现在影响了什么,所以它有点空白……这是代码和相关的屏幕截图
由于此处嵌套 div 的差异太多,因此修改了代码。订单将是 parent > child 等..
.recommendation-modal {
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: flex-start;
background: #FFFFFF;
z-index: 202;
width: 100%;
max-width: 800px;
height: 70vh;
.rec-right--container {
display: flex;
flex-direction: column;
flex: 1;
width: 100%;
height: 100%;
background-color: #4B77BE;
color: #fff;
.rec-right--body {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
padding: 20px;
height: 100%;
@media (max-width: $screen-sm) {
flex-direction: row;
}
最后只需要添加旧语法,我基本上只是找到了所有可能的旧语法,然后将它们放入其中,直到它起作用为止...