Gmail 显示图像之间的间隙 [英] Gmail displaying gaps between images
问题描述
为客户构建一个过于花哨的 HTML 邮件.代码在 http://validator.w3.org 处通过直接输入验证为 XHTML 1.0 Transitional.问题是 Gmail 会在每张图片之间显示间隙.
Building an overly fancy HTML mail for a client. Code validates at http://validator.w3.org as XHTML 1.0 Transitional by direct input. Thing is Gmail displays gaps between each of the images.
每个图像及其锚点都有内联样式，将填充和边距设置为零.锚标签和包含的图像标签之间或后续锚标签之间没有空格.代码中没有换行符.
Each image and its anchor have inline styles setting padding and margin to zero. There is no whitespace between the anchor tag and the enclosed image tag or between subsequent anchor tags. There are no newlines in the code.
这里是直接从收到的电子邮件中粘贴出来的:
Here it is pasted straight out of the received email:
<a href="https://www.threestages.net/Online/default.asp?doWork::WScontent::loadArticle=Load&BOparam::WScontent::loadArticle::article_id=8D916F3F-E119-4746-A4AB-010F99CE901C&sessionlanguage=&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&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&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&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 "A Chorus Line"--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 "Insight" (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 显示空白的左栏.
Here is the complete document. https://wserver.flc.losrios.edu/~vapa/email/20110203_email.html It's the left column that Gmail is showing gaps on.
有什么建议吗?
推荐答案
您问题的具体答案是 Gmail 为仅包含图像的表格单元格添加了额外空间.要解决此问题，请添加到这些图片中:
The specific answer to your question is that Gmail adds extra space to table cells which only contain an image. To fix this issue add to these images:
style="display:block"
提示:Campaign Monitor 是一个很好的资源，MailChimp 也是如此一>.两者都提供了几个指南、模板示例等.
Tip:
Campaign Monitor is a great resource, as is MailChimp. Both provide several guides, template examples, etc.
这篇关于Gmail 显示图像之间的间隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
