Flex (Materialize valign-wrapper) не работает в IE - PullRequest
Новая
       17

Flex (Materialize valign-wrapper) не работает в IE

0 голосов
/ 27 августа 2018

Итак, у меня есть материализованная коллекция с некоторыми настройками. 

<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 и не добавляет слишком много навязчивого кода.

Пример * * тысяча двадцать-один

1 Ответ

0 голосов
/ 27 августа 2018

Таким образом, ответ на этот вопрос должен начинаться с того факта, что проблема на самом деле не в IE, а в Outlook, который, как предполагал ОП, использует механизм рендеринга IE.

На самом деле это не так. Outlook использует движок рендеринга MS Word для электронных писем в формате HTML, что совершенно не похоже на IE, и имеет целый ряд «ловушек» для тех, кто пытается разработать электронную почту в формате HTML (особенно потому, что большинство электронных писем в формате HTML должны корректно отображаться в куча других почтовых клиентов, которые обычно работают лучше)

Я думаю, что можно с уверенностью сказать, что CSS Flex не будет поддерживаться, но проблемы намного глубже, чем это. В этой статье рассматриваются некоторые наиболее распространенные проблемы, возникающие при разработке электронных писем в формате HTML для Outlook. Это довольно плохо. И вот еще одна старая статья , которая может помочь.

Надеюсь, это поможет, хотя я подозреваю, что вместо этого вы можете почувствовать себя немного беспомощным. Со времен IE6 Microsoft продвинулась далеко, но HTML-рендеринг в Outlook все еще застрял в мрачных старых временах. (Как и MS Word, конечно ... но никто не использует это для генерации HTML ... не так ли? Они действительно ??? !!)

...