Кнопка пуста в Outlook - PullRequest
Новая
       26

Кнопка пуста в Outlook

0 голосов
/ 14 ноября 2018

Я пытаюсь добавить кнопку с гиперссылкой к создаваемому мной шаблону электронной почты, и по какой-то причине при открытии этого электронного письма через Outlook кнопка пуста, только с границами и без графического стиля.При открытии этого в веб-браузере все выглядит хорошо даже на Gmail, не знаю, в чем проблема, я надеюсь, что кто-то может помочь.Это строка кода для кнопки: 

<div align="center" class="button-container center " style="padding-right: 10px; padding-left: 10px; padding-top:10px; padding-bottom:10px;"><!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"><tr><td style="padding-right: 10px; padding-left: 10px; padding-top:10px; padding-bottom:10px;" align="center"><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="" style="height:27pt; v-text-anchor:middle; width:129pt;" arcsize="17%" strokecolor="#59B5EB" fillcolor="#FFFFFF"><w:anchorlock/><v:textbox inset="0,0,0,0"><center style="color:#59B5EB; font-family:Roboto, 'Helvetica Neue', Helvetica, sans-serif; font-size:16px;"><![endif]-->
    <div style="color: #59B5EB; background-color: #FF0000; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; max-width: 172px; width: 132px;width: auto; border-top: 2px solid #FFFFFF; border-right: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; border-left: 2px solid #FFFFFF; padding-top: 5px; padding-right: 20px; padding-bottom: 0px; padding-left: 20px; font-family: Roboto, 'Helvetica Neue', Helvetica, sans-serif; text-align: center; mso-border-alt: none;"><span style="font-size:18px;line-height:40px;"><a href="http://mywebsite.com" style="text-decoration: none; color: #FFFFFF; font-weight:bold">Join Team</a></span></div>
    <!--[if mso]></center></v:textbox></v:roundrect></td></tr></table><![endif]--></div>

1 Ответ

0 голосов
/ 14 ноября 2018

Это пример кнопки, которая будет работать в Outlook и других почтовых клиентах: 

<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: auto;">
  <tr>
    <td style="border-radius: 6px; background: #ff0000;">
      <a href="http://mywebsite.com" style="background: #ff0000; border: 1px solid #ff0000; font-family: sans-serif; font-size: 15px; line-height: 15px; text-decoration: none; padding: 13px 17px; color: #ffffff; display: block; border-radius: 6px;">Join Team</a>
    </td>
  </tr>
</table>

Почти все в вашем примере кода будут иметь проблемы с Outlook и другими почтовыми клиентами.

Например, Outlook не работает с <div>.Outlook не очень хорошо работает с отступами.Outlook не будет работать со шрифтами Google, такими как Roboto, или шрифтами с двумя именами, такими как Helvetica Neue.Он не будет работать с закругленными углами, поэтому border-radius: 6px; будет игнорироваться.Возможно arcsize="17%" сработает, но мне не нужно это проверять.Я просто хотел дать вам способ идти вперед.

Удачи.

...