IE 10 Flexbox 高度错误？

Question

我无法理解为什么 IE10 会为下面的绿色元素添加额外的边距或高度。

大多数浏览器显示的预期样式：

IE10.0 渲染的样式不正确：

HTML

<div class="row">
  <div id="box1">
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dapibus vehicula lobortis. Vestibulum et justo porttitor, suscipit sapien sed, fermentum magna.
    </div>
  </div>
  <div id="box2">
    <div>
      Phasellus venenatis mauris libero, in maximus odio blandit eu. Suspendisse in purus sed.
    </div>
  </div>
  <div id="box3">
    <div>
      Quisque egestas feugiat ante, eget congue metus.
    </div>
  </div>
</div>

CSS

.row{
  display:-ms-flexbox;
  display:flex;
  -ms-flex-pack:justify;
  justify-content:space-between;
  -ms-flex-align:center;
  align-items:center;
}
.row>*{
  -ms-flex-negative:1;
  flex-shrink:1;
  margin:4px;
  padding:16px;
  display:-ms-inline-flexbox;
  display:inline-flex;
  -ms-flex-align:center;
  align-items:center;
  justify-content:space-between;
}
.row>*>div{
  -ms-flex-positive:1;
  flex-grow:1;
  -ms-flex-negative:1;
  flex-shrink:1;
}
#box1 {
  -ms-flex-positive:3;
  flex-grow:3;
  background-color:red;
}

#box2 {
  -ms-flex-positive:2;
  flex-grow:2;
  -ms-flex-preferred-size:495px;
  flex-basis:495px;
  background-color:green;
}
#box3{
  -ms-flex-positive:1;
  flex-grow:1;
  -ms-flex-preferred-size:173px;
  flex-basis:173px;
  -ms-flex-negative:0;
  flex-shrink:0;
  background-color:blue;
}

有谁知道原因或解决方法吗？

Answer 1

仍然无法发表评论（这有点倒退，imo，但无论如何）

但是否与

有关

#box2{...
 -ms-flex-preferred-size:495px;
  flex-basis:495px;
}

#box3{
  -ms-flex-preferred-size:173px;
  flex-basis:173px;
}

Answer 2

-ms-flex-preferred-size:495px; 应该是 -ms-flex-preferred-size:173px;

Answer 3

是的，这是一个错误，已在 IE11 上修复。

在 IE10 上解决这个问题你可以试试下面的方法，结果不会完全一样，但是足够接近了：

#box1 {
  flex: 3;
}
#box2 {
  flex: 2;
}
#box3 {
  flex-grow: 0.25;
}

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center
}
.row > * {
  -webkit-flex-shrink: 1;
  -ms-flex-negative: 1;
  flex-shrink: 1;
  margin: 4px;
  padding: 16px;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  fustify-content: space-between
}
.row > * > div {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-flex-shrink: 1;
  -ms-flex-negative: 1;
  flex-shrink: 1
}
#box1 {
  -webkit-box-flex: 3;
  -webkit-flex-grow: 3;
  -ms-flex-positive: 3;
  flex-grow: 3;
  -webkit-flex-basis: 0;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  background-color: red;
}
#box2 {
  -webkit-box-flex: 2;
  -webkit-flex-grow: 2;
  -ms-flex-positive: 2;
  flex-grow: 2;
  -webkit-flex-basis: 0;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  background-color: green
}
#box3 {
  -webkit-box-flex: .25;
  -webkit-flex-grow: .25;
  -ms-flex-positive: .25;
  flex-grow: .25;
  -webkit-flex-basis: 173px;
  -ms-flex-preferred-size: 173px;
  flex-basis: 173px;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  background-color: blue
}

<div class="row">
  <div id="box1">
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dapibus vehicula lobortis. Vestibulum et justo porttitor, suscipit sapien sed, fermentum magna.
    </div>
  </div>
  <div id="box2">
    <div>
      Phasellus venenatis mauris libero, in maximus odio blandit eu. Suspendisse in purus sed.
    </div>
  </div>
  <div id="box3">
    <div>
      Quisque egestas feugiat ante, eget congue metus.
    </div>
  </div>
</div>

随意修改这些数字以将结果调整为所需的结果。

IE 10 Flexbox 高度错误？

IE 10 Flexbox height bug?

html

css

internet-explorer

flexbox

internet-explorer-10

大多数浏览器显示的预期样式：

IE10.0 渲染的样式不正确：

HTML

CSS