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

Question

So I have got a materialize collection with some customisation.

<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>

I use the valign-wrapper to vertically align the span and the i. And the valign-wrapper use flex.

These code does not work in IE.

My current workaaruond is to add

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

Is there a better way to make it cross-browser workable? Ideal pertain valign-wrapper and do not add too many intrusive code.

Example

First questions I always ask when someone says "it doesn't work in IE": What version of IE are you using? Have you checked to make sure it isn't running compatibility mode. Having said that, looking at [CanIUse.com](https://caniuse.com/#feat=flexbox) will tell you that while IE11 does support flex, it is listed as only "partial support due to the large number of bugs". IE10 requires a `-ms-` prefix for flex, and also has the bugs. Without seeing your code in action, it's not easy to say exactly what the problem is, but those should be your starting points for investigating it. — Spudley, Aug 27 '18 at 12:17
It is web add-in embedded in outlook desktop client . I think it is IE 11. — Frostless, Aug 27 '18 at 12:25
@Frostless your example does not have a single line of css, create [mcve] for us to test. — Esko, Aug 27 '18 at 12:27
@Esko sorry, but that is because I use the Materialize framework...all css and js file are referenced... — Frostless, Aug 27 '18 at 12:34
*"embedded in outlook desktop client"* ... ah, yeah. I wouldn't hold your breath for Outlook to render correctly. Again, you'll need to know the version of Outlook you're using, but a lot of versions of Outlook actually use the MS Word rendering engine for HTML emails, and not IE at all. [Here's a link that might be useful](https://litmus.com/blog/a-guide-to-rendering-differences-in-microsoft-outlook-clients). The article is a few years old though, so more recent versions may be doing something different again. — Spudley, Aug 27 '18 at 20:20

score 1 · Accepted Answer · answered Aug 27 '18 at 20:35

So the answer to the question here has to begin with the fact that the problem isn't actually IE, but Outlook, which the OP was assuming is using the IE rendering engine.

In fact, it doesn't. Outlook uses the MS Word rendering engine for HTML emails, which is a completely different beast to IE, and has a whole slew of 'gotchas' for anyone trying to develop an HTML email (especially as most HTML emails need to be displayed correctly in a bunch of other email clients as well, which generally do work better)

I think it's pretty safe to say that CSS Flex is going to be unsupported, but the problems go a lot deeper than that. 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 that may help.

I hope that helps, although I suspect it may instead leave you feeling a bit helpless. Microsoft has moved on a long way since the days of IE6, but Outlook's HTML rendering is still stuck in the dark old days. (As is MS Word's, of course... but nobody uses that for generating HTML... do they? Do they??? Really??!!)

I did some research, and seems like outlook desktop client use IE for rendering the web add-in? https://stackoverflow.com/questions/32039841/what-browser-browser-engine-do-office-add-ins-use — Frostless, Aug 27 '18 at 23:26
Okay. I don't have a Windows box with Outlook to test on at the moment, so I'll can't check it now. As that answer suggests, you might want to do some UA sniffing to confirm exactly what the engine is before taking anything for granted. — Spudley, Aug 28 '18 at 07:35

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

1 Answers1