2016-10-25 16 views
0

Я получаю этот штрих внутри кнопки для письма, которое я кодирую. Он появляется только в Outlook 2007, 2010 и 2013 годах, и я не могу понять, как его удалить? Есть идеи?Кнопки в Outlook 2007, 2010, 2013 и 2016

enter image description here

Код:

`<a href="http://buttons.cm" style="color: #ffffff; background: #a52023; 
border: 1px solid #a52023; display: inline-block; font-family: tahoma; 
font-weight: 900; letter-spacing: 2px; font-size: 16px; border-radius: 80px; 
line-height: 60px; text-align: center; text-decoration: none; width: 275px; 
-webkit-text-size-adjust: none; mso-hide: all;">GET FREE WORKWEAR</a>` 
+0

Вы можете добавить остальную часть своего кода в эту кнопку? Также обратите внимание, что «mso-hide: all; css фактически сделает этот тег скрытым в большинстве версий Outlook, поэтому на самом деле это не может быть проблемой. – Gortonington

ответ

3

Да, Windows Outlook 2007, 2010, 2013 и даже 2016 все имеют пятнистую поддержку блочной модели. Чтобы получить красивую, нажавшую кнопку, работающую (к сожалению), требуется намного больше кода.

Может нужно играть с толщиной границы, обивкой, и количеством &nbsp; с, но это должно решить проблему и дать вам, работая кнопку приличного вида во всех почтовых клиентах (включая Outlook):

<!-- Button : Begin --> 
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto;"> 
    <tr> 
     <td style="border-radius: 3px; background: #a52023; text-align: center;"> 
      <a href="http://www.google.com" style="background: #a52023; border: 15px solid #a52023; font-family: tahoma; font-weight: 900; letter-spacing: 2px; font-size: 16px; mso-height-rule: exactly; line-height: 60px; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: 900; text-transform: uppercase;"> 
       &nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ffffff">Get Free Workwear</span>&nbsp;&nbsp;&nbsp;&nbsp; 
      </a> 
     </td> 
    </tr> 
</table> 
<!-- Button : END -->