4 列 Flexbox-Layout 适用于任何浏览器，除了 IE，它在一行中只显示 3 列

Question

我正在编写一个网站（导航还没有响应），我主要使用 Flexbox 来进行列和定位。该网站在 Firefox、Chrome 和 Edge 中看起来不错，它在 header 下的简介部分、城市部分、推荐和定价中显示了所需的 4 列布局。

但是当我在 IE(11) 中打开网站时，它只显示我定义 4 的 3 列，而在定价部分，它只显示我定义 3 的 2 列。

当我删除 column-padding 时，它会在其他列旁边显示所需的列数，没有填充。我已经为这些列提供了 box-sizing: border-box 属性，并且我使用 autoprefixer 为我使用的所有 CSS3 东西添加前缀。

它仍然不起作用。这是link：http://omnifood.marvinklempert.de/

代码在此代码笔中：https://codepen.io/anon/pen/KYqVwY

.grid {
-js-display: flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.column {
-webkit-box-sizing: border-box;
        box-sizing: border-box;
-webkit-box-flex: 1;
    -ms-flex: 1;
        flex: 1;
}
.bigger { -webkit-box-flex: 2.5; -ms-flex: 2.5; flex: 2.5; }
.halves .column  { -webkit-box-flex: 0; -ms-flex: 0 1 50%; flex: 0 1 50%;}
.thirds .column  { -webkit-box-flex: 0; -ms-flex: 0 1 33.3333%; flex: 0 1 33.3333%;}
.fourths .column { -webkit-box-flex: 0; -ms-flex: 0 1 25%; flex: 0 1 25%;}
.fifths .column  { -webkit-box-flex: 0; -ms-flex: 0 1 20%; flex: 0 1 20%;}
.sixths .column  { -webkit-box-flex: 0; -ms-flex: 0 1 16.6666%; flex: 0 1 16.6666%; }
.sevenths .column { -webkit-box-flex: 0; -ms-flex: 0 1 14.2857%; flex: 0 1 14.2857%; }
.eights .column  { -webkit-box-flex: 0; -ms-flex: 0 1 12.5%; flex: 0 1 12.5%; }

@media (max-width: 900px) {
.grid { display: block; }
}

Answer 1

您需要将 max-width 设置为等于您的 flex-basis 以便 IE11 正确呈现此布局。

因此，例如：

.fourths .column { -webkit-box-flex: 0; -ms-flex: 0 1 25%; flex: 0 1 25%; max-width: 25%}

4 列 Flexbox-Layout 适用于任何浏览器，除了 IE，它在一行中只显示 3 列

4-column Flexbox-Layout works great on any browser, besides IE, where it shows only 3 columns in a row

html

css

internet-explorer

flexbox

internet-explorer-11