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上解决它，您可以尝试以下操作，结果将不完全相同，但足够接近：

$input = JFactory::getDocument()->input;
$format = $input->get('format','json','STR');
$view = $this->getView($view_name, $format);
$view->display($tpl);

#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
}

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

Answer 3

-ms-flex-preferred-size:495px;应为-ms-flex-preferred-size:173px;