HTML 电子邮件 Outlook 图像显示内联块答案

【问题标题】：HTML email Outlook images display inline blockHTML 电子邮件 Outlook 图像显示内联块
【发布时间】：2014-09-11 14:47:28
【问题描述】：

我在将 2 个图像保留在电子邮件标题上作为显示时遇到问题：inline-block 我需要 2 个图像相互“接触”，这样它们之间就不会像下面的屏幕截图那样出现白色间隙.如果它可以是 1 张图片，那就太好了，但它们都链接到不同的网址。

这是此 TD 的代码。哦，当然这也是响应式的 :)

<td>
  <!--[if (gte mso 9)|(IE)]>
  <table width="258" align="left" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td>
  <![endif]-->
  <table align="left" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" class="content" style="width:100%;max-width:258px;">
    <tr>
      <td><a href="#"><img alt="" src="header-l.png" style="width:100%;max-width:258px;border:0;display:block;" /></a></td>
    </tr>
  </table>
  <!--[if (gte mso 9)|(IE)]>
        </td>
      </tr>
  </table>
  <![endif]-->
  <!--[if (gte mso 9)|(IE)]>
  <table width="258" align="left" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td>
  <![endif]-->
  <table align="left" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" class="content" style="width:100%;max-width:258px;">
    <tr>
      <td><a href="#"><img alt="" src="header-r.png" style="width:100%;max-width:258px;border:0;display:block;" /></a></td>
    </tr>
  </table>
  <!--[if (gte mso 9)|(IE)]>
        </td>
      </tr>
  </table>
  <![endif]-->
</td>

我在标题中也有这些样式...当我添加这个“mso-table-lspace:0;mso-table-rspace:0;”时到桌子上，它缩小了那里的 LARGE 差距，但它们之间仍然有 2px 的差距。

.content {width: 100%; max-width: 516px;}
table {border-collapse: collapse;table-layout: fixed;margin:0 auto;mso-table-lspace:0;mso-table-rspace:0;}
table table table {table-layout: auto;}
table table {table-layout: auto;}

愿意尝试任何建议！

【问题讨论】：

也许有用litmus.com/blog/the-ultimate-guide-to-email-image-blocking

标签： html outlook html-email

【解决方案1】：

你能用这个结构测试吗：

<table style=" margin:0;"cellpadding="0" cellspacing="0" border="0" >
    <tr style=" margin:0;">
        <td style="margin:0;">
            <img style="margin:0; display:block;"  src="img2.jpg" />
        </td>
        <td style="margin:0;">
            <img style="margin:0; display:block;"  src="img1.jpg" />
        </td>
    </tr>
</table>

我从不使用电子邮件测试响应...所以我在我的所有元素上使用固定大小...

【讨论】：

【解决方案2】：

一个可行的解决方法是将以下样式表添加到电子邮件的头部

<style type="text/css">
[office365] button,div {display: block !important; }
</style>

使用 Outlook Online 中所有新添加的按钮/div 部分获得正确的显示块设置，空白消失

【讨论】：