Question

在Chrome / Firefox / Safari中，我获得了不错的三栏布局。

在IE11中，我得到了一个非常长的文本行。

.row的高度等于文字的line-height。

我创建了一个简单的jsfiddle来说明问题。

为什么会这样？

body {
  background: -webkit-linear-gradient(left, #09c 0, #ad258c 28%, #eb2a31 53%, #f8ec2c 77%, #00a255 100%);
  background: linear-gradient(to right, #09c 0, #ad258c 28%, #eb2a31 53%, #f8ec2c 77%, #00a255 100%);
  box-sizing: border-box;
  max-width: 1024px;
  margin: 0 auto;
  color: black;
  padding: 0 7px 7px 7px;
}
.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.row section {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0;
  flex: 1 1 0;
  background: white;
  margin-top: 7px;
  margin-right: 7px;
}
.row section:last-child {
  margin-right: 0;
}

<div class="row">
  <section>[text]</section>
  <section>[text]</section>
  <section>[text]</section>
</div>

Answer 1

这在IE11中是一个愚蠢的怪癖。

而不是：

flex: 1 1 0;

使用：

flex: 1 1 0px;

IE11与无单元flex-basis不相称。

在研究这个答案时我偶然发现了这个问题：https://stackoverflow.com/a/34014580/3597276

IE11中的多列flexbox布局呈现为单行

1 个答案: