Outlook ist nicht respektieren meine "Schaltfläche" Hintergrundfarbe

Question

Ich habe einen Inhaltsblock für eine E-Mail, die nicht funktioniert, wie ich es in Outlook will. Der Block muss auch in Mobile funktionieren und sollte so in Browser/Desktop aussehen:

.

In allen Browsern sieht das mit Ausnahme von Outlook perfekt aus. In Outlook, entfernt es die gesamte weiße Hintergrundfarbe von der Taste (es tatsächlich reduziert sich auf den Textinhalt nach unten) und es sieht Gott schrecklich:

Hier ist mein Code für die Box:

<table border="0" cellpadding="0" cellspacing="0" width="100%"> 
<tr> 
    <td align="center"> 
     <table bgcolor="#f5f5f5" border="0" cellpadding="0" cellspacing="0" class="w-full" width="640"> 
      <tr> 
       <td width="20"> &nbsp;</td> 
       <td align="center"> 
        <table border="0" cellpadding="0" cellspacing="0" dir="ltr" width="100%"> 
         <tr> 
          <td class="full" dir="ltr" valign="top" width="50%"> 
           <table border="0" cellpadding="0" cellspacing="0" width="100%"> 
            <!--TABLE WITH IMAGE PART--> 
            <tr> 
             <td height="15" style="font-size: 1px; line-height: 1px;"> &nbsp;</td> 
            </tr> 
            <tr> 
             <td align="center"> <img src="http://placehold.it/170x170" style="display: block; border: 0;" width="170"></td> 
            </tr> 
            <tr> 
             <td height="15" style="font-size: 1px; line-height: 1px;"> &nbsp;</td> 
            </tr> 
           </table> 
          </td> 
          <td class="full" dir="ltr" valign="top" width="50%"> 
           <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"> 
            <!--TABLE WITH TEXT AND TITLE PART--> 
            <tr> 
             <td style="font-size: 1px; line-height: 1px;" width="20"> &nbsp;</td> 
             <td height="15" style="font-size: 1px; line-height: 1px;"> &nbsp;</td> 
             <td style="font-size: 1px; line-height: 1px;" width="20"> &nbsp;</td> 
            </tr> 
            <tr> 
             <td width="20"> &nbsp;</td> 
             <td align="left" class="font-22c" style="font-family:'Century Gothic', Helvetica, Arial, sans-serif; color: #7e828c; font-size: 20px; text-transform: uppercase;"> Lorem ipsum dolor</td> 
             <td width="20"> &nbsp;</td> 
            </tr> 
            <tr> 
             <td width="20"> &nbsp;</td> 
             <td height="20"> &nbsp;</td> 
             <td width="20"> &nbsp;</td> 
            </tr> 
            <tr> 
             <td width="20"> &nbsp;</td> 
             <td align="left" class="font-16c" style="font-family:'Century Gothic', Helvetica, Arial, sans-serif; color: #7e828c; font-size: 16px; line-height: 20px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td> 
             <td width="20"> &nbsp;</td> 
            </tr> 
            <tr> 
             <td width="20"> &nbsp;</td> 
             <td height="20"> &nbsp;</td> 
             <td width="20"> &nbsp;</td> 
            </tr> 
            <tr> 
             <td width="20"> &nbsp;</td> 
             <td class="cta" bgcolor="" width="" style="-webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; border: 0px;font-family: Century Gothic; padding-top: 0px; padding-bottom:0px; font-weight:;"> <a class="cta" 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: 14px; font-family: Century Gothic, Helvetica, Arial, sans-serif; color: #8b8b93; background: #ffffff; border: 1px solid #8b8b93; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; line-height:30px;">LORUM IPSUM</a> </td> 
             <td width="20"> &nbsp;</td> 
            </tr> 
            <tr> 
             <td style="font-size: 1px; line-height: 1px;" width="20"> &nbsp;</td> 
             <td height="15" style="font-size: 1px; line-height: 1px;"> &nbsp;</td> 
             <td style="font-size: 1px; line-height: 1px;" width="20"> &nbsp;</td> 
            </tr> 
           </table> 
          </td> 
         </tr> 
        </table> 
       </td> 
       <td width="20"> &nbsp;</td> 
      </tr> 
     </table> 
    </td> 
</tr> 

Und die Klasse CTA ist wie folgt:

cta { 
     margin: auto; 
     display: inline-block; 
     background:#ffffff !important; 

    } 
    /* BUTTON STYLES */ 

    cta { 
     padding: 15px 15px; 
     width: 150px; 
     font-family: 'AvantGarde-demibold', 'Century Gothic', 'Arial Bold', Arial, sans-serif !important; 
     font-size: 14px; 
     font-weight: bold; 
     color: #8b8b93; 
     background: #ffffff !important; 
     border: 1px solid #8b8b93; 
     font-weight: bold; 
     align-content: center; 
    } 

Answer 1

Leider ist es viel mehr Code erfordert, als es sollte eine Taste, um die Anzeige gut und in Outlook anklickbar sein. So etwas sollte den Trick (kein CSS im <style> erforderlich, wenn Sie :hover Effekte tun wollen):

<!-- Button : BEGIN --> 
<table role="presentation" cellspacing="0" cellpadding="0" border="0"> 
    <tr> 
     <td style="border-radius: 3px; background: #FFFFFF; text-align: center;"> 
      <a href="http://www.google.com" style="background: #FFFFFF; padding: 15px; border: 1px solid #8b8b93; font-family: 'AvantGarde-demibold', 'Century Gothic', 'Arial Bold', Arial, font-size: 14px; line-height: 1.1; text-align: center; text-decoration: none; display: block; font-weight: bold;"> 
       <span style="color:#8b8b93;">A Button</span> 
      </a> 
     </td> 
    </tr> 
</table> 
<!-- Button : END --> 

Answer 2

Ehrlich gesagt, die einzige Möglichkeit, Outlook HTML so aussehen zu lassen, wie ich möchte, ist die HTML-Generierung mit ungefähr HTML2 Standard-Tags und -Eigenschaften und ohne Verwendung von CSS. Einige CSS Rendern, aber es ist wirklich Hit oder Miss.

Deshalb denke ich, ist besser, direkt die background-color auf Ihre Html tag als in Ihrer css Datei!