mso-line-height и mso-text-повышение не работают в Outlook 2013? - PullRequest
Новая
       42

mso-line-height и mso-text-повышение не работают в Outlook 2013?

0 голосов
/ 07 апреля 2019

У меня есть нижний колонтитул с 3 столбцами, которые все строго вложены в табличный макет для шаблона электронной почты в формате HTML.Я пытаюсь исправить нижний колонтитул, в котором высота строки для третьего столбца не соответствует верхней базовой линии первых двух.

Я проводил исследование, чтобы выяснить, было ли исправление для этого ипопытался изменить mso-line-height-rule:exactly; mso-text-raise:44px; до последнего столбца, где объявлено line-height, но это, похоже, не имеет никакого эффекта.

Вы можете видеть на изображении ниже текст, смещенный вниз в последнем столбце, и текст немного разнесен, в отличие от второго изображения, которое правильно отображается в электронном письме.

Outlook2013 (в Amazon Workspace - Windows 7 Pro):

Outlook 2013

Outlook 2011 для Mac:

enter image description here

Код нижнего колонтитула: 

            <!-- Footer -->
            <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">             
                <tr>
                    <td class="content-spacing" style="font-size:0pt; line-height:0pt; text-align:left" width="1"></td>
                    <td align="center">
                        <table width="650" border="0" cellspacing="0" cellpadding="0" class="mobile-shell">
                            <tr>
                                <td class="td" style="width:650px; min-width:650px; font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal; Margin:0">
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td>
                                                <table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"><tr><td height="25" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">&nbsp;</td></tr></table>

                                                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                    <tr>
                                                        <!-- Column 1 -->
                                                        <th class="column-top" style="font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal; vertical-align:top; Margin:0" width="150">
                                                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                                <tr>
                                                                    <td><div class="img" style="font-size:0pt; line-height:0pt; text-align:left"><image src="https://www.designevo.com/res/templates/thumb_small/black-and-yellow-basketball.png" border="0" width="120" height="120" alt="Healthy Moms. Strong Babies." /></div></td>
                                                                </tr>
                                                            </table>
                                                        </th>
                                                        <!-- END Column 1 -->

                                                        <!-- Column -->
                                                        <th class="column" style="font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal; Margin:0" width="20"><div style="font-size:0pt; line-height:0pt;" class="mobile-br-20"></div></th>
                                                        <!-- END Column -->

                                                        <!-- Column 2 -->
                                                        <th class="column-top" style="font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal; vertical-align:top; Margin:0" width="150">
                                                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                                <tr>
                                                                    <td>       

                                                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                                <tr>
                                                                    <td>
                                                                        <!-- Button -->
                                                                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                                            <tr>
                                                                                <td align="left">
                                                                                    <table border="0" cellspacing="0" cellpadding="0" bgcolor="blue" style="border-radius: 0;">
                                                                                        <tr>
                                                                                            <td class="img" style="font-size:0pt; line-height:0pt; text-align:left" width="18"></td>
                                                                                            <td>
                                                                                                <table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"><tr><td height="10" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">&nbsp;</td></tr></table>

                                                                                                <div class="text-button" style="color:#ffffff; font-family:Arial,sans-serif; font-size:19px; line-height:18px; text-align:center; text-transform:uppercase">
                                                                                                    <a href="#" target="_blank" class="link-white" style="color:#ffffff; text-decoration:none"><span class="link-white" style="color:#ffffff; text-decoration:none; font-weight:bolder;">BUTTON</span></a>
                                                                                                </div>
                                                                                                <table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"><tr><td height="10" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">&nbsp;</td></tr></table>

                                                                                            </td>
                                                                                            <td class="img" style="font-size:0pt; line-height:0pt; text-align:left" width="18"></td>
                                                                                        </tr>
                                                                                    </table>
                                                                                </td>
                                                                            </tr>
                                                                        </table>
                                                                        <!-- END Button -->

                                                                        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"><tr><td height="10" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">&nbsp;</td></tr></table>

                                                                        <div class="text-col-2" style="color:#0F1934; font-family:Arial,sans-serif; font-size:14px; line-height:24px; text-transform:capitalize; font-weight: bolder; text-align:left;">
                                                                            <span class="purple-text">Connect With Us</span>
                                                                        </div>

                                                                        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"><tr><td height="5" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">&nbsp;</td></tr></table>

                                                                        <!-- Social Icons -->
                                                                        <table border="0" cellspacing="0" cellpadding="0">
                                                                            <tr>
                                                                                <td class="img" style="font-size:0pt; line-height:0pt; text-align:left" width="27"><a href="#" target="_blank"><img alt="#" src="" width="23" height="23"/></a></td>
                                                                                <td class="img" style="font-size:0pt; line-height:0pt; text-align:left" width="27"><a href="#" target="_blank"><img alt="#" src="#" width="23" height="23"/></a></td>
                                                                                <td class="img" style="font-size:0pt; line-height:0pt; text-align:left" width="25"><a href="#" target="_blank"><img alt="#" src="#" width="21" height="23"></a></td>
                                                                                <td class="img" style="font-size:0pt; line-height:0pt; text-align:left" width="27"><a href="#" target="_blank"><img alt="#" src="#" width="23" height="23"></a></td>            
                                                                            </tr>
                                                                        </table>
                                                                        <!-- END Social Icons -->
                                                                    </td>
                                                                </tr>
                                                            </table>
                                                                    </td>
                                                                </tr>
                                                            </table>
                                                        </th>
                                                        <!-- END Column 2 -->
                                                        <!-- Column -->
                                                        <th class="column" style="font-size:0pt; mso-line-height-rule:exactly; line-height:0pt; padding:0; margin:0; font-weight:normal; Margin:0" width="20"><div style="font-size:0pt; line-height:0pt;" class="mobile-br-20"></div></th>
                                                        <!-- END Column -->
                                                        <!-- Column 3 -->
                                                        <th class="column-top" style="font-size:0pt; mso-line-height-rule:exactly; line-height:0pt; padding:0; margin:0; font-weight:normal; vertical-align:top; Margin:0" width="400">
                                                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                                <tr>
                                                                    <td><div class="text-col-3 copyright-text" style="color:#0F1934; font-family:Arial,sans-serif; font-size:14px; mso-line-height-rule:exactly; mso-text-raise:44px; line-height:24px; text-align:left;">
                                                                            <span style="font-size:14px; color:#787985; mso-line-height-rule:exactly; mso-text-raise:44px; line-height:15px;">The Company, 1234 Main Street
                                                                            <br/>
                                                                            Suite 9999, Los Angeles, CA 10001</span>
                                                                            <br/>
                                                                            <br/>
                                                                            <span style="font-size:12px; color:#787985; mso-line-height-rule:exactly; mso-text-raise:44px; line-height:17px;">&amp;copy; 2019 The Company
                                                                            <br/>
                                                                            All Rights Reserved
                                                                            <br/>
                                                                            <a href="#" target="_blank" style="color:#787985;">Terms, Privacy &amp; Notices</a></span>
                                                                        </div>
                                                                    </td>                
                                                                </tr>
                                                            </table>
                                                        </th>
                                                        <!-- END Column 3 -->
                                                    </tr>
                                                </table>
                                                <table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; mso-line-height-rule:exactly; line-height:0pt; text-align:center; width:100%; min-width:100%"><tr><td height="50" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%">&nbsp;</td></tr></table>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td class="content-spacing" style="font-size:0pt; line-height:0pt; text-align:left" width="1"></td>
                </tr>
            </table>
            <!-- END Footer -->

1 Ответ

2 голосов
/ 08 апреля 2019

Поддержка Outlook для div пятнистая.

Удалите div и переместите таблицу стилей к родителю td.Вместо этого используйте line-height, чтобы он работал для всех почтовых клиентов.

Удалите span и используйте p. 

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="text-col-3 copyright-text" style="color: #0F1934; font-family: Arial,sans-serif; font-size: 14px; line-height: 15px; text-align: left;">
        <p>The Company, 1234 Main Street
        <br />
        Suite 9999, Los Angeles, CA 10001</p>

        <p>&amp;copy; 2019 The Company
        <br />
        All Rights Reserved
        <br />
        <a href="#" target="_blank" style="color: #787985;">Terms, Privacy &amp; Notices</a></p>
      </td>                
  </tr>
</table>

Удачи.

...