Flex（Materialize valign-wrapper）在 IE 中不起作用

Question

所以我有一个带有一些自定义的物化集合。

<ul class="collection">
<li class="collection-item avatar valign-wrapper" style="min-height: 64px">
    <i class="material-icons circle">build</i>
        <span class="title">A</span>
</li>
<li class="collection-item avatar valign-wrapper" style="min-height: 64px">
    <i class="material-icons circle">comment</i>
    <span class="title">B</span>
</li>
<li class="collection-item avatar valign-wrapper" style="min-height: 64px">
    <i class="material-icons circle">description</i>
    <span class="title">C</span>
</li>
<li class="collection-item avatar valign-wrapper" style="min-height: 64px">
    <i class="material-icons circle">content_copy</i>
    <span class="title">D</span>
</li>

我使用valign-wrapper 垂直对齐span 和i。而valign-wrapper 使用flex。

这些代码在 IE 中不起作用。

我目前的工作是添加

li span{
height: 40px; /* image's height */
display: table-cell;
vertical-align: middle;
}

有没有更好的方法让它跨浏览器可用？理想适合valign-wrapper，不要添加太多侵入性代码。

Example

Answer 1

所以这里问题的答案必须从问题实际上不是 IE 而是 Outlook 开始，OP 假设它使用的是 IE 渲染引擎。

事实上，它没有。 Outlook 使用 MS Word 渲染引擎来处理 HTML 电子邮件，这与 IE 完全不同，对于任何试图开发 HTML 电子邮件的人来说，它都有一大堆“陷阱”（尤其是大多数 HTML 电子邮件需要在还有一堆其他的电子邮件客户端，它们通常工作得更好）

我认为可以肯定地说 CSS Flex 将不受支持，但问题远不止于此。 This article 讨论了在为 Outlook 开发 HTML 电子邮件时会发现的一些更常见的问题。这很糟糕。 here's another, older article 可能会有所帮助。

我希望这会有所帮助，尽管我怀疑这可能会让您感到有些无助。自 IE6 时代以来，微软已经取得了长足的进步，但 Outlook 的 HTML 呈现仍停留在黑暗的过去。 （当然，MS Word 也是如此……但没有人使用它来生成 HTML……是吗？是吗？真的吗？？！！）