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 的事实开始，而是 OP 假设使用 IE 渲染引擎的 Outlook。

其实不然。 Outlook 使用 MS Word 呈现引擎来处理 HTML 电子邮件，这与 IE 完全不同，并且对于任何试图开发 HTML 电子邮件（尤其是作为大多数 HTML 电子邮件也需要在一堆其他电子邮件客户端中正确显示，通常效果更好）

我认为可以肯定地说 CSS Flex 将不受支持，但问题远不止于此。 This article goes into some of the more common problems you'll find with developing HTML emails for Outlook. It's pretty bad. And here's another, older article 可能会有帮助。

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

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

Flex (Materialize valign-wrapper) does not work in IE

html

css

internet-explorer

materialize

flexbox