wake-up-neo.net

Abgerundete Ecken in Outlook ohne Bilder

Ich kann mit vielen Kunden abgerundete Ecken erstellen

style="-moz-border-radius: 15px; border-radius: 15px;"

Dieses CSS erstellt jedoch keine abgerundeten Ecken in Outlook. Gibt es eine einfache Möglichkeit, abgerundete Ecken ohne Bilder in Outlook zu erstellen?

17
Danny

http://www.campaignmonitor.com/css/ zeigt alle in großen E-Mail-Clients unterstützten CSS an. abgerundete Grenzen schafften es nicht einmal auf die Liste. Auf der Seite befindet sich ein Link zu einer vollständigen PDF-Datei, die feststellt, dass der Randradius NUR in Thunderbird 2 unterstützt wird

bitte beachten Sie, dass Sie die Stile in die HTML-Elemente einbetten müssen, um eine Vielzahl von E-Mail-Clients zu unterstützen

Dieser Code erzeugt Schaltflächen mit abgerundeten Ecken in Outlook 2010, wobei die bedingten Kommentare von Outlook () und VML verwendet werden:

    <div>
    <!--[if mso]>
    <v:roundrect xmlns:v="urn:schemas-Microsoft-com:vml" xmlns:w="urn:schemas-Microsoft-com:office:Word" href="http://www.EXAMPLE.com/" style="height:40px;v-text-anchor:middle;width:300px;" arcsize="10%" stroke="f" fillcolor="#d62828">
        <w:anchorlock/>
        <center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
            Button Text Here!
        </center>
    </v:roundrect>
    <![endif]-->
    <!--[if !mso]> <!-->
    <table cellspacing="0" cellpadding="0"> <tr>
        <td align="center" width="300" height="40" bgcolor="#d62828" style="-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #ffffff; display: block;">
            <a href="http://www.EXAMPLE.com/" style="color: #ffffff; font-size:16px; font-weight: bold; font-family:sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block">
                Button Text Here!
            </a>
        </td>
    </tr> </table>
    <!-- <![endif]-->
</div>

Nur in Outlook 2010 und den wichtigsten Browsern getestet, nicht in OWA, Outlook.com oder anderen mobilen Browsern. Es lohnt einen genaueren Blick. Kredit wo fällig - http://www.industrydive.com/blog/how-to-make-html-email-buttons-that-rock/

40
VanAlbert

Ich schlage vor, abgerundete Ecken einfach nicht zu verwenden. Nach langen Testzeiten, sowohl mit Litmus, als auch mit mehreren Clients - abgerundete Ecken mit den vorgeschlagenen Methoden:

<div>
<!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-Microsoft-com:vml" xmlns:w="urn:schemas-Microsoft-com:office:Word" href="http://www.EXAMPLE.com/" style="mso-wrap-style:none; mso-position-horizontal: center" arcsize="10%" strokecolor="#0368d4" strokeweight="1px" fillcolor="#d62828">
    <v:textbox style="mso-fit-shape-to-text:true">
        <center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">Button Text Here!</center>
    </v:textbox>
  </v:roundrect>
  <![endif]-->
  <![if !mso]>
  <table cellspacing="0" cellpadding="0"> <tr> 
  <td align="center" width="300" height="40" bgcolor="#d62828" style="-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #ffffff; display: block;">
    <a href="http://www.EXAMPLE.com/" style="font-size:16px; font-weight: bold; font-family:sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block">
    <span style="color: #ffffff;">
      Button Text Here!
    </span>
    </a>
  </td> 
  </tr> </table> 
  <![endif]>
</div>

Wird bei der Weiterleitung von GMAIL unterbrochen, wenn diese Art von Code an GMAIL weitergeleitet wird. Es wird versucht, den Code neu zu erstellen, da er die Bedingung nicht mehr enthält und der folgende Code als Beispiel generiert wird:

<div style="margin-top:36.0pt">
   <p class="MsoNormal" align="center" dir="RTL" style="text-align:center;direction:rtl;unicode-bidi:embed">
      <span dir="LTR" style="font-size:11.5pt;font-family:&quot;Arial&quot;,sans-serif;color:#2d3b4a">
         <u></u>
         <span>
            <map name="m_3406853463519709989_MicrosoftOfficeMap0">
               <area shape="Polygon" coords="38, 2, 13, 12, 3, 37, 13, 62, 38, 72, 228, 72, 253, 62, 263, 37, 253, 12, 228, 2, 38, 2" href="https://local.greeninvoice.co.il/app/account/verify?key=001dEbYWSscdPxI8xt6BcS%2B%2BrA%3D%3D" target="_blank" data-saferedirecturl="https://www.google.com/url?hl=en&amp;q=https://local.greeninvoice.co.il/app/account/verify?key%3D001dEbYWSscdPxI8xt6BcS%252B%252BrA%253D%253D&amp;source=gmail&amp;ust=1520336994067000&amp;usg=AFQjCNE1iYP97qNrlsCccYFgDyRW3iVPRw">
            </map>
            <img border="0" width="264" height="74" src="?ui=2&amp;ik=4e1d22bf20&amp;view=fimg&amp;th=161f5fb79e36447b&amp;attid=0.1&amp;disp=emb&amp;attbid=ANGjdJ_3ejUStIrGp0uslTPSXPSph1LGDDnyTH2gHxWhcMpCHN_CjO4ZYsqbvqZJ9gXCxQ7e3KHV2CAn0f-FWPYH7w7lTM9ym54909Upm-h_G9W--o_I431bc9U3icg&amp;sz=w528-h148&amp;ats=1520250594056&amp;rm=161f5fb79e36447b&amp;zw&amp;atsh=1" usemap="#m_3406853463519709989_MicrosoftOfficeMap0" alt="Rounded Rectangle: הפעלת החשבון " class="CToWUd">
         </span>
         <u></u>
      </span>
      <span lang="HE" style="font-size:11.5pt;font-family:&quot;Arial&quot;,sans-serif;color:#2d3b4a"><u></u><u></u></span>
   </p>
</div>

Wie Sie sehen, wird dies die Breite, Höhe, den Text und das Zentrum des Inhalts beeinträchtigen. Dies geschieht, weil VML eine proprietäre Microsoft-Sprache ist und von Outlook beim Weiterleiten in eine Map konvertiert wird

 enter image description here

1
dinbrca

Weiter zu @VanAlberts Antwort, die Eli Dickinsons großartige Arbeit zeigt. Hier ist ein Link zu Eli's Git Repo https://Gist.github.com/elidickinson/9424116

Ich dachte, ich würde meine Verbesserung mit Elis Code teilen, der eine dynamische Breite-Schaltfläche basierend auf dem darin enthaltenen Text ermöglicht.

Ich habe diese https://litmus.com/community/discussions/538-vml-Outlook-07-10-13-unwanted-20px-padding-at-the-bottom gefunden, die die Verwendung von mso-fit-shape-to-text:true zeigt.

Und diese https://litmus.com/community/discussions/1269-flexible-multi-line-bulletproof-knöpfe zeigt, wie unerwünschte Polsterungen vermieden werden.

Das ist mein Endergebnis

<div>
<!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-Microsoft-com:vml" xmlns:w="urn:schemas-Microsoft-com:office:Word" href="http://www.EXAMPLE.com/" style="mso-wrap-style:none; mso-position-horizontal: center" arcsize="10%" strokecolor="#0368d4" strokeweight="1px" fillcolor="#d62828">
    <v:textbox style="mso-fit-shape-to-text:true">
        <center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">Button Text Here!</center>
    </v:textbox>
  </v:roundrect>
  <![endif]-->
  <![if !mso]>
  <table cellspacing="0" cellpadding="0"> <tr> 
  <td align="center" width="300" height="40" bgcolor="#d62828" style="-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #ffffff; display: block;">
    <a href="http://www.EXAMPLE.com/" style="font-size:16px; font-weight: bold; font-family:sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block">
    <span style="color: #ffffff;">
      Button Text Here!
    </span>
    </a>
  </td> 
  </tr> </table> 
  <![endif]>
</div>

Scheint in Outlook 2016 gut zu funktionieren, das Word zum Rendern von HTML verwendet

0
Rel