html - Google Mail zeigt Lücken zwischen Bildern an



email gmail (6)

Eine übertriebene HTML-Mail für einen Client erstellen. Code validiert bei http://validator.w3.org als XHTML 1.0 Transitional durch direkte Eingabe. Die Sache ist Gmail zeigt Lücken zwischen den einzelnen Bildern.

Jedes Bild und sein Anker haben Inline-Stile, die Padding und Rand auf Null setzen. Zwischen dem Anker-Tag und dem eingeschlossenen Bild-Tag oder zwischen nachfolgenden Anker-Tags gibt es keine Leerzeichen. Der Code enthält keine Zeilenumbrüche.

Hier wird es direkt aus der empfangenen E-Mail eingefügt:

<a href="https://www.threestages.net/Online/default.asp?doWork::WScontent::loadArticle=Load&amp;BOparam::WScontent::loadArticle::article_id=8D916F3F-E119-4746-A4AB-010F99CE901C&amp;sessionlanguage=&amp;menu_id=007F7A77-97DB-4601-9691-CB7AA4ED7950" style="margin: 0pt; padding: 0pt;" shape="rect"><img alt="Buy Tickets" border="0" height="55" src="https://wserver.flc.losrios.edu/~vapa/email/20110203_buy_tickets.jpg" style="margin: 0pt; padding: 0pt;" width="180"></a><a href="https://www.threestages.net/Online/default.asp?doWork::WScontent::loadArticle=Load&amp;BOparam::WScontent::loadArticle::article_id=1768A54F-7E43-474A-B18A-4BBF04F14E92" style="margin: 0pt; padding: 0pt;" shape="rect"><img alt="Three Stages Presents" border="0" height="182" src="https://wserver.flc.losrios.edu/~vapa/email/20110203_presents.jpg" style="margin: 0pt; padding: 0pt;" width="180"></a><a href="https://www.threestages.net/Online/default.asp?doWork::WScontent::loadArticle=Load&amp;BOparam::WScontent::loadArticle::article_id=CE8BDACE-EB4C-4785-BA41-9B9FF6A87D03" style="margin: 0pt; padding: 0pt;" shape="rect"><img alt="Partners of Three Stages" border="0" height="181" src="https://wserver.flc.losrios.edu/~vapa/email/20110203_partners.jpg" style="margin: 0pt; padding: 0pt;" width="180"></a><a href="https://www.threestages.net/Online/default.asp?doWork::WScontent::loadArticle=Load&amp;BOparam::WScontent::loadArticle::article_id=63DB284F-02DE-4A30-A48C-F03E619E59CA" style="margin: 0pt; padding: 0pt;" shape="rect"><img alt="Productions of Three Stages" border="0" height="176" src="https://wserver.flc.losrios.edu/~vapa/email/20110203_productions.jpg" style="margin: 0pt; padding: 0pt;" width="180"></a><a href="http://www.vcstar.com/news/2011/jan/20/hats-off-to-a-chorus-line-the-high-kicking-in-an/" shape="rect"><img alt="The national tour of &quot;A Chorus Line&quot;--opening at Three Stages 2/11--receives a rave review in Ventura. " border="0" height="134" src="https://wserver.flc.losrios.edu/~vapa//email/20110203_three_bits_1.jpg" width="180"></a><a href="http://www.nytimes.com/2011/01/13/books/13book.html?_r=2" shape="rect"><img alt="Mr. Rosanne Cash’s new memoir" border="0" height="44" src="https://wserver.flc.losrios.edu/~vapa//email/20110203_three_bits_2.jpg" width="180"></a><a href="http://www.archive.org/details/Insight_080403_a" shape="rect"><img alt="An interview with Jeffrey Siegel on KXJZ's &quot;Insight&quot; (He's the second guest on the show). Originally recorded April, 2008." border="0" height="68" src="https://wserver.flc.losrios.edu/~vapa//email/20110203_three_bits_3.jpg" width="180"></a><a href="http://www.tampabay.com/news/humaninterest/magic-stretches-minds-grins-muscles-of-handicapped-children-in-largo/1148482 " shape="rect"><img alt="Twenty years after his own accident, Kevin Spencer, of Spencers Theatre of Illusion teaches magic to kids—as therapy. " border="0" height="81" src="https://wserver.flc.losrios.edu/~vapa//email/20110203_three_bits_4.jpg" width="180"></a><a href="http://www.facebook.com/pages/Three-Stages-at-Folsom-Lake-College/169056696438709" style="margin: 0pt; padding: 0pt;" shape="rect"><img alt="Follow us on Facebook" border="0" height="92" src="https://wserver.flc.losrios.edu/~vapa/email/20110203_facebook.jpg" style="margin: 0pt; padding: 0pt;" width="180"></a>

Hier ist das komplette Dokument. https://wserver.flc.losrios.edu/~vapa/email/20110203_email.html Es ist die linke Spalte, auf der Google Mail Lücken zeigt.

Irgendein Rat?


Die spezifische Antwort auf Ihre Frage ist, dass Google Mail zusätzlichen Platz für Tabellenzellen hinzufügt, die nur ein Bild enthalten. Um dieses Problem zu beheben, fügen Sie diesen Bildern Folgendes hinzu:

style="display:block"


Tipp: Campaign Monitor ist eine großartige Ressource, MailChimp wie MailChimp . Beide bieten mehrere Anleitungen, Vorlagenbeispiele usw.


Ich habe dieses Problem mithilfe von Dreamweaver und der Verwendung von Image-Maps behoben. Ich würde das nur vorschlagen, wenn es keinen anderen Weg gibt, aber es hat mein Problem behoben.


In meinem HTML habe ich viele Tabellenzellen, die mehrere Bilder der gleichen Höhe nebeneinander enthalten. Das Problem mit dieser Technik stellte sich heraus, dass ich meine Bilder nicht anzeigen lassen konnte, da dies mein Layout drastisch durcheinander bringen würde. Es stellte sich heraus, dass die Lösung zum Entfernen der Gmail-Lücke darin bestand, einfach den Stil der Zeilenhöhe hinzuzufügen: 50% der Tabelle selbst. Ich habe in allen Browsern mit positiven Ergebnissen getestet. Um ehrlich zu sein, ich bin mir nicht 100% sicher, warum das funktioniert oder ob es in jedem Fall funktioniert, aber wenn Ihre Situation wie meine ist, möchten Sie vielleicht diese Lösung ausprobieren.

PS, Danke an @Jon und @Jason für die Idee.


Verwenden Sie für jedes Bild in einer eigenen Tabellenzelle display: block und line-height: 50%

<img alt="some text" style="display: block;line-height: 50%" src="image.jpg" />

Setzen Sie den Abstand auf 0 und den Rand auf 0, obwohl der Rand auf -1px eingestellt werden könnte, um kleine Lücken auf dem iPhone / iPad zu beheben.

Stick: <style type="text/css"> img{display: block;}</style>

... innerhalb des Body-Tags, nicht des Kopfes, da er von einigen Clients entfernt wird.

Lassen Sie sich nicht davon abhalten, wenn Ihr Code validiert wird, E-Mail-Templates funktionieren, die Cross-Browser und Clients verwenden, führt zu etwas fehlerhaftem Code!

PS Achten Sie auf Outlook 2007 (es verwendet die Word-Rendering-Engine) und Hotmail auf Firefox.


Wenn Sie eine Tabellenzelle mit nur einem Bild haben und immer noch den zusätzlichen Platz unter Ihren Bildern sehen, besteht die Lösung darin, die Zeilenhöhe hinzuzufügen line-height:0; zu der Tabellenzelle. Beispiel: <td style="line-height:0;"> .


Wenn Sie inline CSS nicht verwenden möchten, fügen Sie align = "top" und border = "0" hinzu:

`<img src="" width="100" height="100" alt="" align="top" border="0" />`




gmail