Выравнивание текста кнопки в Outlook.com - PullRequest
Новая
       9

Выравнивание текста кнопки в Outlook.com

0 голосов
/ 23 мая 2018

Нахождение странного поведения только в outlook.com с выравниванием текста кнопки для сборки электронной почты.По какой-то причине он выровнен по верху кнопки, а не посередине.Невозможно понять, почему это так.Любые идеи приветствуются.

Спасибо за ваше время и мысли.

Фрагмент кода и ссылка на изображение CTA ниже. 

    <table cellpadding="0" cellspacing="0" border="0"  >
     <tr>
      <td style="padding: 0px 0px 0px 0px;  background-color:#989b98; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#e4008f; cursor: pointer; display: block; min-height: 45px; vertical-align: middle; min-width: 220px;" align="center" valign="middle"><a href="#" style="text-decoration:none; padding: 12px 20px 10px 20px;  background-color:#989b98; color:#e4008f; cursor: pointer; display: block; border: 1px solid #989b98; min-width: 220px; font-weight: bold;  outline: none;" target="_blank">16pxXXXX XXXXX XXXXX</a></td>
     </tr>
    </table>

Screen grab of CTA text alignment in Outlook.com

1 Ответ

0 голосов
/ 23 мая 2018

Я бы сначала начал с просмотра этого актива на предмет "электронной почты", связанной с тем, чтобы понять, как различные почтовые клиенты реагируют на CSS.

Вы заметите, что display не поддерживается в Outlook, что приведет к тому, что ваш тег привязки не сможет использовать заполнение.Я бы порекомендовал кодировать кнопку электронной почты следующим образом: 

<table cellpadding="0" cellspacing="0" border="0">
<tbody>
    <tr>
        <td align="center" valign="middle" bgcolor="#989b98" style="padding: 12px 20px; font-family: 'Arial', Helvetica, sans-serif; font-size: 16px; font-weight: bold;">
            <a href="#" style="color: #e4008f; text-decoration: none; outline: none; border: none;" target="_blank">16pxXXXX XXXXX XXXXX</a>
        </td>
    </tr>
</tbody>
</table>

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

...