用于电子邮件的 HTML 图像模块

Question

我遇到了一个奇怪的问题，我正在为 HTML 电子邮件制作一个模块，其中左侧有 4 个小图像，右侧有 1 个大图像。

一切看起来都不错，但在一些电子邮件客户端中，如 Yahoo、Outlook.com、Gmail 和 outlook 2000-2003，我在小图像之间有大约 3px 的空白。将 margin 和 padding 设置为 0 没有帮助，而且我根本看不出空白是从哪里来的。

这是我目前为该模块创建的 HTML:

<table border="0" cellpadding="0" cellspacing="0" class="resize320" width="600">
<tr valign="top">
    <td width="25%">
        <img alt="" border="0" src="http://image.e.selected.com/lib/fe8813727d6d037e76/m/2/fa2c635f-b36e-4280-87dd-4005ac367f77.png" style="width: 100%; max-width: 150px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin: 0 0 0 0;" width="150"><img alt="" border="0" src="http://image.e.selected.com/lib/fe8813727d6d037e76/m/2/fa2c635f-b36e-4280-87dd-4005ac367f77.png" style="width: 100%; max-width: 150px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin: 0 0 0 0;" width="150">
    </td>
    <td width="25%">
        <img alt="" border="0" src="http://image.e.selected.com/lib/fe8813727d6d037e76/m/2/fa2c635f-b36e-4280-87dd-4005ac367f77.png" style="width: 100%; max-width: 150px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin: 0 0 0 0;" width="150"><img alt="" border="0" src="http://image.e.selected.com/lib/fe8813727d6d037e76/m/2/fa2c635f-b36e-4280-87dd-4005ac367f77.png" style="width: 100%; max-width: 150px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin: 0 0 0 0;" width="150">
    </td>
    <td width="50%">
        <img alt="" border="0" src="http://image.e.selected.com/lib/fe8813727d6d037e76/m/2/3c2b121f-b627-44e6-84c3-39465bd4e72c.png" style="width: 100%; max-width: 300px;" width="300">
    </td>
</tr>
</table>

这是我模板中的 CSS:

<style type="text/css">
a {
 text-decoration: none;
 color:#000;
}
a.disable-link {
 pointer-events: none;
 cursor: default;
}
body {
 width:100%;
 padding:0;
 margin:0;
}
div, p, a, li, td {
 -webkit-text-size-adjust:none;
}
.ii a {
 text-decoration: none !important;
 color: transparent !important;
}
.ReadMsgBody .ExternalClass a:link {
 text-decoration: none !important;
 color: transparent !important;
}
.yshortcuts {
 text-decoration: none !important;
 color: transparent !important;
}
/*Fix for making placeholders visible in editor*/
 ul.editorSectionEmpty {
 min-width: 200px !important;
}
 @media screen and (max-device-width: 720px) {
table[class=nomob], td[class=nomob], div[class=nomob], span[class=nomob] {
   display: none !important;
  }
  table[class=resizedynamic], td[class=resizedynamic], td[class=resizedynamic] img {
   width: 100% !important;
   height: auto !important;
  }

table[class=resize320], td[class=resize320] {
 width:320px !important;
 height:auto !important;
}
td[class=resizeimg320] img {
 width:320px !important;
 height:auto !important;
}
td[class=resizeimg200] img {
 width:200px !important;
 height:auto !important;
}
td[class=colsplit] {
 width:320px !important;
 float:left !important;
}
td[class=mobilepadding] {
 padding: 0 10px !important;
}
font[class=textresize] {
 font-size:14px !important;
}
table[class=resize280], td[class=resize280] {
 width:280px !important;
 height:auto !important;
}
td[class=resize75] {
 width:75px !important;
 height:auto !important;
}
table[class=resize320mob], td[class=resize320mob] {
 width:320px !important;
 height:20px !important;
}
a[class="disable-link"] {
 pointer-events: auto !important;
 cursor: auto !important;
}
td[class=resizeimg160] img {
 width:160px !important;
 height:auto !important;
}
}
</style>

Answer 1

看起来您需要更多 CSS 规则来重置 <table>的行为。尝试将此添加到 <style> :

/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
    mso-table-lspace: 0pt !important;
    mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
    border-spacing: 0 !important;
    border-collapse: collapse !important;
    table-layout: fixed !important;
    margin: 0 auto !important;
}
table table table {
    table-layout: auto;
}