CSS FlexBox 在 IE on vBulletin 论坛中不水平居中

Question

我试图使用Flexbox对齐四个图像/链接，以获得一个简单的横幅行。它在Chrome和FF中工作正常，但在IE 11中，Flexbox似乎失败了，因为图像垂直而不是水平堆叠。

您可以在此处查看图像行：http://bit.ly/1KZ20hf

它们靠近顶部，上面写着"流行的RPF脉冲帖子："请注意，在IE中，横幅不再水平对齐。

在我的本地驱动器和非 vBulletin 论坛站点上，当我测试横幅代码时，IE 中没有问题。所以我想知道在 vBulletin 框架中删除代码是否会导致 IE 11 出现问题。任何见解将不胜感激！谢谢。

横幅行使用的 CSS 如下所示：

.sgFlexBox {
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
}
.sgFlexItemFooter {
    width: 205px;
    height: auto;
    margin: 0 12px 15px 12px;
    text-align: center;
} 
.rpfPostLink {
    color: #FFF;
    font: bold 15px/21px Arial;
    text-align: center;
    border: 0;
}
.sgFlexIcon {
    display: block;
    margin: 0 auto 10px auto;
    position: relative;
    vertical-align: bottom;
    border: 2px solid #d2d2d2;
}
#sgCenterTitle {
    color: #FFF;
    font: bold 18px/18px Arial;
    text-align: center;
    padding: 15px 0 10px 0
}

Answer 1

过渡 DOCTYPE 导致 IE Edge 模拟 IE9，不幸的是，该版本不支持 CSS flexbox。