Кнопка выглядит ужасно в Outlook

Question

Привет, я делаю кнопку для работы в Outlook 2010, и проблема в том, что изображение кнопки обычно не зависает, а пробел & не отображается. Есть ли кто-нибудь, кто может помочь мне решить эту проблему? Работает отлично на большинстве почтовых клиентов.

<table style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:center; padding:0; float:left; " align="center" > 
<tbody > 
<tr style="vertical-align:top; text-align:left; padding:0; " align="left" > 

<td style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; display:block; color:#fff; font-family:'Helvetica', 'Arial', sans-serif; font-weight:normal; line-height:19px; font-size:16px; text-align:left; background-color:#EB7201; width:auto !important; " valign="top" align="center" > 

<div class="mktEditable" id="cta-btn"> 

<a href="#pramrylink" style="color: #fff; text-decoration: none; font-family: Helvetica, Arial, sans-serif; font-size: 14px;letter-spacing:1px;vertical-align: middle; display: inline-block; margin: 10px;padding: 10px;"> 
<span style="vertical-align:middle; margin-left:5px;">Primary Button</span> 
<img src="http://eu-lon03.marketo.com/rs/brotheruk/images/arrow-orange.png" alt="facebook" border="0" width="30" height="20" style="vertical-align: middle;"> 
<br> 
</a> 
</div> 
</td> 
</tr> 
</tbody> 
</table> 

Answer 1

Поля и набивка должны быть заменены на td, чтобы поддерживать формат электронной почты в соответствии со всеми клиентами. Но для вас код выше удаления text-align: left; на tr должно исправить это.

ВЫ ДОЛЖНЫ ПРОЧТИТЕ ЭТО НА РАЗРЕШЕНО ИСПОЛЬЗОВАНИЕ CSS ПО EMAILS https://www.campaignmonitor.com/css/

Ive удалены вещам и добавил его ниже для Вас, чтобы работать с.

<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" > 
 
<tbody > 
 
<tr style="vertical-align:top; text-align:left;" align="left" > 
 

 
<td style="color:#fff; font-family:'Helvetica', 'Arial', sans-serif; font-weight:normal; line-height:19px; font-size:16px; " valign="middle" align="center" > 
 

 
<div class="mktEditable" id="cta-btn"> 
 

 
<a href="#pramrylink" style="width: 180px; 
 
\t \t \t \t color: #fff; 
 
\t \t \t \t text-decoration: none; 
 
\t \t \t \t font-family: Helvetica, Arial, sans-serif; 
 
\t \t \t \t font-size: 14px; 
 
\t \t \t \t letter-spacing:1px; 
 
\t \t \t \t vertical-align: middle; 
 
\t \t \t \t display: inline-block; 
 
\t \t \t \t padding: 10px; 
 
\t \t \t \t background-color:#EB7201; "> 
 
<span style="vertical-align:middle;" align="left">Primary Button</span> 
 
<img src="http://eu-lon03.marketo.com/rs/brotheruk/images/arrow-orange.png" alt="facebook" border="0" width="30" height="20" style="vertical-align: middle;"> 
 
<br> 
 
</a> 
 
</div> 
 
</td> 
 
</tr> 
 
</tbody> 
 
</table>

• поплавки заменены align: left/right;
• Поля должны быть заменены более сложными комбинациями ТР и ТД, если что-то должны быть сосредоточены как изображение затем align:center; на упаковке td должен это сделать.

Answer 2

Попробуйте сбросить все по ссылке (0 строк, 0 отступов, 0 размер шрифта) и применить стили (исправить высоту строки, исправить добавление и исправить размер шрифта) внутри ссылки в где вы применяете сброшенные стили.

Предлагаю попробовать много разных реализаций css и повторно отправить ваши письма.

Совет: Campaignmonitor предлагает хороший список в соответствии с CSS и информационные бюллетени https://www.campaignmonitor.com/css/