html - 在 vBulletin 论坛上，CSS FlexBox 没有在 IE 中水平居中

Question

我曾尝试使用 Flexbox 将四个图像/链接对齐一个简单的横幅行。它在 Chrome 和 FF 中运行良好，但在 IE 11 中，Flexbox 似乎失败了，因为图像垂直堆叠而不是水平堆叠。

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

它们靠近顶部，上面写着“Popular RPF Pulse Posts:”请注意在 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 是 unsupported由那个版本。