Gmail отображает пробелы между изображениями

Построение слишком тонкой HTML-почты для клиента. Код проверяется на http://validator.w3.org как XHTML 1.0 Transitional путем прямого ввода. В Gmail отображаются промежутки между изображениями.

Каждое изображение и его привязка имеют встроенные стили, устанавливающие отступы и маржу до нуля. Между тегом привязки и закрытым тегом изображения или между последующими тэгами привязки нет пробелов. В коде нет новых строк.

Здесь он вставлен прямо из полученного письма:

<a href="#" onclick="location.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'; return false;" 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="#" onclick="location.href='https://www.threestages.net/Online/default.asp?doWork::WScontent::loadArticle=Load&amp;BOparam::WScontent::loadArticle::article_id=1768A54F-7E43-474A-B18A-4BBF04F14E92'; return false;" 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="#" onclick="location.href='https://www.threestages.net/Online/default.asp?doWork::WScontent::loadArticle=Load&amp;BOparam::WScontent::loadArticle::article_id=CE8BDACE-EB4C-4785-BA41-9B9FF6A87D03'; return false;" 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="#" onclick="location.href='https://www.threestages.net/Online/default.asp?doWork::WScontent::loadArticle=Load&amp;BOparam::WScontent::loadArticle::article_id=63DB284F-02DE-4A30-A48C-F03E619E59CA'; return false;" 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="#" onclick="location.href='http://www.vcstar.com/news/2011/jan/20/hats-off-to-a-chorus-line-the-high-kicking-in-an/'; return false;" 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="#" onclick="location.href='http://www.nytimes.com/2011/01/13/books/13book.html?_r=2'; return false;" 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="#" onclick="location.href='http://www.archive.org/details/Insight_080403_a'; return false;" shape="rect"><img alt="An interview with Jeffrey Siegel on KXJZ &quot;Insight&quot; (He 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="#" onclick="location.href='http://www.tampabay.com/news/humaninterest/magic-stretches-minds-grins-muscles-of-handicapped-children-in-largo/1148482 '; return false;" 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="#" onclick="location.href='http://www.facebook.com/pages/Three-Stages-at-Folsom-Lake-College/169056696438709'; return false;" 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>

Вот полный документ. https://wserver.flc.losrios.edu/~vapa/email/20110203_email.html Это левый столбец, в котором Gmail показывает пробелы.

Любые советы?

Ответ 1

Конкретный ответ на ваш вопрос заключается в том, что Gmail добавляет дополнительное пространство в ячейки таблицы, которые содержат только изображение. Чтобы устранить эту проблему, добавьте следующие изображения:

style="display:block"

Совет: Монитор кампании - отличный ресурс, а MailChimp. Оба предоставляют несколько руководств, примеры шаблонов и т.д.

Ответ 2

Для любого изображения в своей собственной ячейке таблицы используйте display: block и line-height: 50%

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

Установите отступы на 0 и margin на 0, хотя настройка поля на -1px может устранить небольшие пробелы на iPhone/iPad.

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

... внутри тега body, а не голова, поскольку некоторые из них будут удалены.

Не зацикливайтесь, если ваш код проверяется, получение шаблонов электронной почты, работающих с перекрестными браузерами и клиентами, приводит к некоторому уродливому коду!

P.S. Следите за Outlook 2007 (он использует механизм создания Word) и Hotmail в Firefox.

Ответ 3

Не знаю, если какая-либо помощь, но есть подробное руководство по поддержке CSS в разных почтовых клиентах в www.campaignmonitor.com/css/

Ответ 4

В моем html у меня много ячеек таблицы, которые содержат несколько изображений одной и той же высоты бок о бок. Проблема с этой техникой оказалась в том, что я не мог сделать блок отображения изображений, поскольку это сильно испортило бы мой макет. Выключенное решение для удаления разрыва gmail состояло в том, чтобы просто добавить стиль строки-высоты: 50% к самой таблице. Я тестировал во всех браузерах положительные результаты. Честно говоря, я не уверен на 100%, почему это работает, или если он будет работать в каждом случае, но если ваша ситуация похожа на мою, вы можете попробовать это решение.

PS, благодаря @Jon и @Jason за то, что он дал мне эту идею.

Ответ 5

Если у вас есть ячейка таблицы, содержащая только изображение, и вы все еще видите дополнительное пространство под вашими изображениями, решение заключается в добавлении line-height:0; в ячейку таблицы. Например, <td style="line-height:0;">.

Ответ 6

Если вы не хотите использовать встроенный css, добавьте align = "top" и border = "0":

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

Ответ 7

Я знаю, что это более старое сообщение, но это помогло мне, для тех, кто все еще смотрит: <p style="margin: 0;font-size: 0;line-height: 0;"><img src="..." .../></p>

Оберните изображение (и) в теге абзаца с пометкой "margin", "font-size" и "line-height" равным "0". Я заметил, что как Outlook, так и Gmail добавляли ошибочные теги абзацев, интервалов и шрифтов. Надеюсь, это поможет кому-то еще.

Ответ 8

Я исправил эту проблему, вздрогнув, используя Dreamweaver и используя карты изображений. Я бы предложил только это, если нет другого пути, но он исправил мою проблему.