CSS - Flexbox Justify间隔 - 在IE 10-11中不起作用

Question

我试图理解为什么下面的代码在IE 10和11上不起作用。

.accordion-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

<a href="#" class="accordion-title" aria-controls="w2zjml-accordion" role="tab" id="w2zjml-accordion-label" aria-expanded="false" aria-selected="false">
  <h4 class="heading-orange">Accordion 1</h4>
  <i class="icon icon-arrow-icon"></i>
</a>

预期的行为是h4将位于左侧，而图标位于父级右侧，两个元素都垂直居中。

这适用于所有其他浏览器，但不适用于IE 10和11。

编辑：我应该指出，在IE中，它会将<h4>标题居中并缩进图标。