it-swarm.com.de

Gibt es ein Äquivalent von CSS-max-width, das in HTML-E-Mails funktioniert?

Ich versuche, eine HTML-E-Mail zu erstellen, die in allen weit verbreiteten E-Mail-Clients korrekt angezeigt wird. Ich wickle die gesamte E-Mail in eine Tabelle ein und möchte, dass sie eine Breite hat, die bis zu 98% der verfügbaren Breite beträgt, jedoch nicht mehr als 800 Pixel. Wie folgt: <table style="width:98%; max-width:800px;">

Aber ich mache das nicht so, da entsprechend Outlook 2007 die CSS width-Eigenschaft nicht unterstützt.

Stattdessen mache ich Folgendes: <table width="98%">

Gibt es eine Möglichkeit, auch eine maximale Breite festzulegen, ohne auf CSS angewiesen zu sein?

97
Tim Goodman

Ja, es gibt eine Möglichkeit, max-width mithilfe einer Tabelle zu emulieren, sodass Sie sowohl ein ansprechendes als auch ein Outlook-freundliches Layout erhalten. Darüber hinaus erfordert diese Lösung keine bedingten Kommentare. 

Angenommen, Sie möchten das Äquivalent einer zentrierten div mit max-width von 350px. Sie erstellen eine Tabelle und setzen die Breite auf 100%. Die Tabelle enthält drei Zellen in einer Reihe. Setzen Sie die Breite des Mittelpunkts TD auf 350 (mit dem HTML-Attribut width, nicht mit CSS). 

Wenn Sie möchten, dass Ihr Inhalt links und nicht zentriert angezeigt wird, lassen Sie die erste leere Zelle aus. 

Beispiel: 

<table border="0" cellspacing="0" width="100%">
    <tr>
        <td></td>
        <td width="350">The width of this cell should be a maximum of 
                  350 pixels, but shrink to widths less than 350 pixels.
        </td>
        <td></td>
     </tr>
</table> 

In jsfiddle gebe ich dem Tisch eine Grenze, so dass Sie sehen können, was los ist, aber offensichtlich möchten Sie im wirklichen Leben keine:

http://jsfiddle.net/YcwM7/

185
Mark Nugent

Für Outlook 2007 gibt es einen Trick, der bedingte HTML-Kommentare verwendet.
Der folgende Code stellt sicher, dass die Outlook-Tabelle 800 Pixel breit ist, nicht die maximale Breite, aber es funktioniert besser, als dass die Tabelle über das gesamte Fenster verteilt wird.

<!--[if gte mso 9]>
<style>
#tableForOutlook {
  width:800px;
}
</style>
<![endif]-->

<table style="width:98%;max-width:800px">
<!--[if gte mso 9]>
  <table id="tableForOutlook"><tr><td>
<![endif]-->
    <tr><td>
    [Your Content Goes Here]
    </td></tr>
<!--[if gte mso 9]>
  </td></tr></table>
<![endif]-->
<table>
33
Shay Erlichmen

Die kurze Antwort: nein.

Die lange Antwort:

Feste Formate funktionieren besser für HTML-E-Mails. Meiner Erfahrung nach ist es am besten, so zu tun, als wäre es 1999, wenn es um HTML-E-Mails geht. Seien Sie explizit und verwenden Sie möglichst HTML-Attribute (width = "650") in Ihren Tabellendefinitionen, nicht CSS (style = "width: 650px"). Verwenden Sie feste Breiten, keine Prozentsätze. Eine Tabellenbreite von 650 Pixeln ist eine sichere Sache. Verwenden Sie Inline-CSS, um die Texteigenschaften festzulegen.

Es geht nicht darum, was in "HTML-E-Mails" funktioniert, sondern vielmehr die Fülle von E-Mail-Clients und deren eingeschränkte (und manchmal auch bei Google Mail, Hotmail usw.) begrenzte Fähigkeit, HTML zu rendern.

Etwas spät zur Party, aber das wird es schaffen. Ich habe das Beispiel bei 600 verlassen, da dies die meisten Leute verwenden werden:

Ähnlich wie Shays Beispiel, außer dass auch max-width für die übrigen unterstützten Clients sowie eine zweite Methode zum Verhindern der für Outlook '11 erforderlichen Erweiterung (Medienabfrage) umfasst.

Im Kopf:

  <style type="text/css">
    @media only screen and (min-width: 600px) { .maxW { width:600px !important; } }
  </style>

Im Körper:

<!--[if (gte mso 9)|(IE)]><table width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<div class="maxW" style="max-width:600px;">

<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
  <tr>
    <td>
main content here
    </td>
  </tr>
</table>

</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->

Hier ist ein weiteres Beispiel dafür: E-Mails zur Bestätigung der Auftragsbestätigung für mobile Geräte?

4
John

Dies ist die Lösung, die für mich funktioniert hat

https://Gist.github.com/elidickinson/5525752#gistcomment-1649300 , danke an @ philipp-klinz

<table cellpadding="0" cellspacing="0" border="0" style="padding:0px;margin:0px;width:100%;">
    <tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20">&nbsp;</td></tr>
     <tr>
        <td style="padding:0px;margin:0px;">&nbsp;</td>
        <td style="padding:0px;margin:0px;" width="560"><!-- max width goes here -->

             <!-- PLACE CONTENT HERE -->

        </td>
        <td style="padding:0px;margin:0px;">&nbsp;</td>
    </tr>
    <tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20">&nbsp;</td></tr>
</table>
0
henry