Outlook не укладывает TD для рабочего стола в html электронная почта - PullRequest
Новая
       82

Outlook не укладывает TD для рабочего стола в html электронная почта

0 голосов
/ 30 января 2020

У меня есть html электронная почта, которая отлично работает во всем, кроме внешнего вида.

У меня есть тд с содержанием в них. 

<td style="display: block;">
 <!-- content here -->
</td>
<td style="display: block;">
 <!-- content here -->
</td>

Затем для мобильных устройств я переключаю их на отображение ячейки таблицы, чтобы сделать их встроенными.

Моя проблема с outlook, он не понимает мой настольный дисплей: правило блокировки. Я даже пытался использовать вместо этого, но это тоже не работает.

Есть идеи?

Ответы [ 2 ]

0 голосов
/ 30 января 2020

Это, конечно, странный и альтернативный адаптивный поток к норме, который состоит в том, чтобы все встроить, а затем использовать для мобильных устройств, однако есть несколько методов, которые нужно попробовать ...

Сначала необходимо использовать спецификацию Outlook c код для форсирования стека в Outlook. Вторым является альтернативный метод, использующий плавающие (выровненные) таблицы. Я всегда нахожу таблицы, с которыми лучше всего работать, в любом случае, как этот, но быстрый тест в Litmus показал, что первый вариант с ячейками таблиц прекрасно работает во всех крупных почтовых клиентах. 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->

    <style>
        table, td, th { border-collapse:collapse; }

        @media screen and (max-width: 500px) {
            .stack-container { width:100%!important; }
            .stack-td { display:table-cell!important; }
            .stack-td-2 { width:50%!important; }
        }
    </style>
  </head>
  <body id="body" style="margin:0;padding:0;background-color:#FFFFFF">
        <table role="presentation" class="stack-container" style="width:500px; border:1px solid red;">
            <tr>
                <!--[if mso]>
                <table width="100%" align="center" cellpadding="0" cellspacing="0" border="0" role="presentation">
                <tr>
                <![endif]-->
                <td class="stack-td" style="display:block; border:1px solid green;">nnn</td>
                <!--[if mso]>
                </tr>
                <tr>
                <![endif]-->
                <td class="stack-td" style="display:block; border:1px solid green;">nnn</td>
                <!--[if mso]>
                </tr>
                </table>
                <![endif]-->
            </tr>
        </table>

        <br />
        <br />

        <table role="presentation" class="stack-container" style="width:500px; border:1px solid red;">
            <tr>
                <td>
                    <table align="left" role="presentation" class="stack-td-2" style="width:100%; border:1px solid red;">
                        <tr>
                            <td style="display:block; border:1px solid green;">nnn</td>
                        </tr>
                    </table>
                    <table align="right" role="presentation" class="stack-td-2" style="width:100%; border:1px solid red;">
                        <tr>
                            <td style="display:block; border:1px solid green;">nnn</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
  </body>
</html>
0 голосов
/ 30 января 2020

Редактировать : я пропустил стек на десктопной части. Это будет видно только в Outlook 2007 и новее. Это именно то, что я предлагал раньше, только для Outlook. Только.

Заставить Outlook складывать, используя настраиваемый Outlook-only в голове, чтобы pu sh ширина до 100%. Я предлагаю что-то вроде этого: 

<!--[if gte mso 9]><style>
  .stack-container {
     width: 100% !important;
     margin: auto !important;
  }
  .stack-td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
</style><![endif]-->

Теперь для таблицы: 

<table role="presentation" class="stack-container">
  <tr>
    <td class="stack-td"></td>
    <td class="stack-td"></td>
  </tr>
</table>

Я надеюсь, что все складывается для вас.

Удачи.

...