IE 10 Flexbox高度錯誤？

Question

我無法弄清楚為什么IE10會為下面的綠色元素增加額外的邊距或高度。

http://jsfiddle.net/q4ofmfar/

大多數瀏覽器顯示的預期樣式：

IE10.0呈現的樣式不正確：

http://jsfiddle.net/q4ofmfar/

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

是的，這是一個錯誤，它已在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> 

隨意修改這些數字以將結果調整為所需的數字。

Answer 3

-ms-flex-preferred-size:495px; 應該是-ms-flex-preferred-size:173px;