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假设的Outlook使用的是IE渲染引擎。

事实上，事实并非如此。 Outlook使用MS Word呈现引擎处理HTML电子邮件，这与IE完全不同，并且对于试图开发HTML电子邮件的人来说，有很多“陷阱”（尤其是大多数HTML电子邮件需要正确显示在HTML电子邮件中）。一堆其他电子邮件客户端，通常效果更好）

我认为可以肯定地说CSS Flex将不受支持，但是问题要深得多。 This article涉及在为Outlook开发HTML电子邮件时会发现的一些更常见的问题。真不好here's another, older article可能会有帮助。

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

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

1 个答案: