Question

所以我试图在一个网站上工作，但是在Firefox和IE上，最后一部分有3个图像有水平溢出而Chrome上没有。我将article区域划分为一个弹性框，所以我认为它会处理溢出并调整大小以适应，哪个chrome似乎可以，但Firefox和IE不兼容？我遇到问题的最后一部分是.other。这是我的css设置初始布局和与.other部分和article部分相关的CSS：

body {
  display: flex;
  flex-direction: column;
  width: 100%;
}
main {
  display: flex;
  flex-direction: row;
  flex: auto;
}
article {
  flex: 2;
  overflow-y: auto;
}
aside {
  flex: 1;
  overflow-y: auto;
}
article {
  display: flex;
  flex-direction: column;
}
.other {
  display: flex;
  flex-direction: row;
  margin-top: 70px;
  margin-bottom: 50px;
  align-items: center;
}
.fitness,
.education,
.pastimes {
  flex-shrink: 1;
}

page replacement algorithm

Answer 1

也许你为了方便我们已经将它剥离了..但你使用的是自动前缀吗？如果没有，这可能就是您在浏览器中看到不同行为的原因。

display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;      /* TWEENER - IE 10 */
display: -webkit-flex;     /* NEW - Chrome */
display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

如果你使用的是LESS，那么有一个很好的flexbox mixin库https://gist.github.com/jayj/4012969

如果您正在测试的浏览器还没有支持flexbox，也总是值得检查http://caniuse.com/#feat=flexbox。如果使用供应商前缀，覆盖率非常好。

如何删除Firefox和IE上出现的flexbox中的水平滚动条

1 个答案: