CSS 元素不会在 IE 8 中并排堆叠

Question

我有以下代码可以在我的网站上显示一些联系信息。

HTML

<div class="contactinfo">

<div class="phoneicon">
<a href=""><img src="../images/phoneicon.png" alt="Phone"></a>
</div>

<div class="navdivide1">
<a href=""><img src="../images/navdivide.png" alt="Email"></a>
</div>

<div class="emailicon">
<a href=""><img src="../images/emailicon.png" alt=""></a>
</div>

</div>

CSS

.contactinfo {
display: flex;
float: right;
position: inherit;
right: 0;
top: 0px;
}

.phoneicon
{
}

.emailicon
{
padding-right: 10px;
}

.navdivide
{
}

它在 IE11 中运行良好，但在 IE 8 中，元素堆叠在另一个之上。

我在想也许是“display: flex;” IE8 不支持？

如何让这些 CSS 元素并排对齐？

谢谢

Answer 1

display: flex 绝对不支持 IE8。我建议将网站 caniuse.com 作为此类信息的绝佳资源，这里是您问题的相关页面：http://caniuse.com/flexbox

相反，您可能想要使用 css 浮点数。这样的事情可能对你有用：

.phoneicon,
.emailicon,
.navdivide {
    float: left;
}