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

时间:2014-09-11 14:47:28

标签: html outlook html-email

我遇到的问题是将2个图像保留在电子邮件的标题上作为显示:内联块我需要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;”在桌子上它弥补了那里的大差距,但仍然像他们之间的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;}

愿意尝试任何建议!

enter image description here

2 个答案:

答案 0 :(得分: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>

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

答案 1 :(得分:1)

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

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

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