Ein gestyltes Anchor-Tag kann nicht abgerufen werden, um die korrekten Höhe- und Breitenattribute für eine simulierte Schaltfläche in E-Mail in Outlook 2013 für Windows anzuzeigen

Question

Mein Code funktioniert in Outlook 15.33 für Mac ordnungsgemäß. Schaltflächen nehmen die Höhe und Breite des verknüpften Textes in der Windows-Version von Outlook an. Ich habe versucht, die Schaltflächen als Tags und Tags zu setzen, aber ich habe die gleichen Formatierungsprobleme in der Windows-Version von Outlook.

<table class="fullwidth260" border="0" width="215" cellspacing="0" cellpadding="5" align="left"> 
<tbody> 
<tr> 
<td valign="middle"> 
<a class="quickLinks" href="http://www.mba.org" style="display: flex; text-align: center; padding: 10px 20px 10px 20px; color: #496f8d; font-family: Arial, san-serif; size: 10pt; line-height: 1.2; border: 1px solid #c8d3dc; background-color: #e3e9ed; text-decoration: none; height: 60px; width: 160px; justify-content: center; flex-direction: column;">STATE RELATIONS ONLINE COMMUNITY</a> 
</td> 
</tr> 
</tbody> 
</table> 

Answer 1

Ihr Entwurf für E-Mail, nicht für das Web. Outlook non-Mac unterstützt die CSS-Attribute flex oder padding nicht vollständig.

Outlook ist ein großer Fehler, um Schaltflächen richtig anzuzeigen. Ich würde Ihnen mehr Ratschläge geben, aber Sie haben Ihren bestehenden Code nicht veröffentlicht, was es schwierig macht, Vorschläge zu machen, wie Sie bessere Ratschläge zur Lösung Ihrer Probleme geben können.

Viel Glück.

Answer 2

Versuchen Sie es mit dieser Methode. Ich habe festgestellt, dass es auf allen E-Mail-Clients funktioniert, die ich kenne. Sie müssen die Hintergrundfarbe des TD, die Hintergrundfarbe des Anker-Tags, die Strichfarbe und die Breite der Schaltfläche ändern.

<table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;"> 
 
       <tr> 
 
        <td align="center" bgcolor="#87be45" width="150" style="-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;"> 
 
        <a href="http://www.example.com" style="padding: 10px;width:150px;display: block;text-decoration: none;border:0;text-align: center;font-weight: bold;font-size: 15px;font-family: sans-serif;color: #ffffff;background: #87be45;border: 1px solid #87be45;-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;line-height:17px;" class="button_link"> 
 
         Get Started! 
 
        </a> 
 
        </td> 
 
       </tr> 
 
       </table>

Lassen Sie mich wissen, ob das hilft.