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

Question

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

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

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

<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>

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

Любой совет?

Answer 1

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

style="display:block"

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

Answer 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, а не головы, так как некоторые клиенты его удаляют.

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

PS Остерегайтесь Outlook 2007 (он использует движок рендеринга Word)и Hotmail на Firefox.

Answer 3

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

Answer 4

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

PS, спасибо @Jon и @Jason за предоставленную мне идею.

Answer 5

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

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

Answer 6

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

Answer 7

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

Answer 8

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

Оберните ваши изображения в тег абзаца с полями, размером шрифта и строкойВысота установлена ​​на «0».Я заметил, что и в Outlook, и в Gmail были добавлены ошибочные теги абзаца, диапазона и шрифта.Надеюсь, это поможет кому-то еще.