outlook中带有蓝线的html图片

Question

我正在为我们公司创建电子邮件签名(使用Cloudpages中的html代码进行工作)，它在gmail和Apple mail中运行得很好，但当你在Outlook中打开电子邮件(在浏览器或Apple mail中从Gmail发送)时，图片周围会出现蓝线。

我怎样才能去掉那些蓝线？

printscreen blue lines

    <!-- [if gte mso 9]>
<xml>
  <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<p>&nbsp;</p>
<table border="0" width="400" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size: 0; line-height: 0 !important; mso-line-height-rule: exactly;" valign="bottom">$!photoUrl$!photoUrl<img src="$!photoUrl" alt="Foto" width="132" height="160" /></td>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px;" align="left" valign="bottom">
<table style="width: 275px;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="background-color: #0791a6; font-size: 0; line-height: 0; width: 1px;"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="1" height="1" /></td>
<td style="font-size: 0; line-height: 0; width: 8px;" valign="top"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="8" height="1" /></td>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 12px !important; line-height: 15px !important;" align="left" valign="top" width="140">
<p style="font-family: Arial, Helvetica, sans-serif; font-size: 12px !important; line-height: 15px !important;"><span style="text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 12px !important; line-height: 15px !important; color: #000001;"> <span style="text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 12px !important; line-height: 15px !important;"> <!-- START NAAM --> <strong style="text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 12px !important; line-height: 15px !important;">$personalName $personalSurname</strong><br /><em style="text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 12px !important; line-height: 15px !important;">$orgJobTitle</em><br /><br /> <!-- EINDE NAAM --> </span> </span></p>
</td>
<td style="font-size: 0; line-height: 0; width: 10px;" valign="top"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="10" height="1" /></td>
<td style="background-color: #0791a6; font-size: 0; line-height: 0; width: 1px;"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="1" height="1" /></td>
<td style="font-size: 0; line-height: 0; width: 8px;" valign="top"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="8" height="1" /></td>
<td style="font-size: 0; line-height: 0; width: 107px;" align="left" valign="top"><img src="https://www.vka.nl/wp-content/uploads/2017/03/logo-vka.gif" alt="Logo VKA" width="107" height="54" /></td>
</tr>
<tr>
<td style="background-color: #0791a6; font-size: 0; line-height: 0;"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="1" height="1" /></td>
<td style="font-size: 0; line-height: 0; width: 8px;" valign="top"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="8" height="1" /></td>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px;" align="left" valign="bottom">
<p style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px;"><span style="text-decoration: none; color: #000001;"> <!-- START TELEFOON --> #if ($phoneMobile !="")<span style="color: #000001 !important;"><span style="color: #000001;">M $phoneMobile</span></span>#end <br /><span style="color: #000001 !important;"><span style="color: #000001;">T +31 79 368 10 00</span></span><br /> <a style="color: #000001 !important;" href="https://www.vka.nl/?utm_source=emailhandtekening" target="_blank"><span style="color: #000001 !important;"><span style="color: #000001;">www.vka.nl</span></span></a> <!-- EINDE TELEFOON --> </span></p>
</td>
<td style="font-size: 0; line-height: 0; width: 10px;" valign="top"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="10" height="1" /></td>
<td style="background-color: #0791a6; font-size: 0; line-height: 0;"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="1" height="1" /></td>
<td style="font-size: 0; line-height: 0; width: 8px;" valign="top"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="8" height="1" /></td>
<td style="font-size: 0; line-height: 0; width: 70px;" align="left" valign="bottom"><!-- START SOCIAL MEDIA -->
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size: 0; line-height: 0 !important; mso-line-height-rule: exactly; height: 28px; width: 34px;"><a title="LinkedIn" href="$!linkedin"><img src="https://www.vka.nl/wp-content/uploads/2017/03/icon-linkedin.gif" alt="LinkedIn" width="34" height="28" border="0" /></a></td>
<td style="font-size: 0; line-height: 0 !important; mso-line-height-rule: exactly; height: 28px; width: 73px;"><a title="Twitter" href="$!twitter"><img src="https://www.vka.nl/wp-content/uploads/2017/03/icon-twitter.gif" alt="Twitter" width="34" height="28" border="0" /></a></td>
</tr>
</tbody>
</table>
<!-- EINDE SOCIAL MEDIA --></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" width="400" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size: 0; line-height: 0; height: 18px;"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="1" height="18" /></td>
</tr>
<tr>
<td style="font-size: 0; line-height: 0; height: 32px;" align="left">
<table border="0" width="400" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size: 0; line-height: 0 !important; mso-line-height-rule: exactly; height: 8px; background-color: #f6db30; padding: 0;" height="8"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="1" height="8" /></td>
<td style="font-size: 0; line-height: 0px; mso-line-height-rule: exactly; height: 8px; width: 8px; padding: 0; background-color: #f6db30;" align="left" valign="top" height="8"><img src="https://www.vka.nl/wp-content/uploads/2017/03/hoekje-boven.gif" alt="" width="8" height="8" /></td>
</tr>
<tr>
<td class="gelebalk" style="font-size: 0; line-height: 0 !important; mso-line-height-rule: exactly; height: 8px; background-color: #f6db30; text-align: center; padding: 0;" align="center"><!-- START LINK -->
<p style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px; font-weight: bold;"><a style="text-decoration: underline; color: #000001 !important;" href="https://www.vka.nl/privacy-podcast/?utm_source=emailhandtekening&amp;utm_medium=vka" target="_blank"><span style="color: #000001 !important;"><span style="color: #000001;">Ontdek onze Privacy Podcast in iTunes</span></span></a></p>
<!-- EINDE LINK --></td>
<td style="font-size: 0; line-height: 0 !important; mso-line-height-rule: exactly; width: 8px; background-color: #f6db30; padding: 0;" align="left" height="8"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="8" height="8" /></td>
</tr>
<tr>
<td style="font-size: 0; line-height: 0 !important; mso-line-height-rule: exactly; height: 8px; background-color: #f6db30; padding: 0;" height="8"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="1" height="8" /></td>
<td style="font-size: 0; line-height: 0 !important; mso-line-height-rule: exactly; height: 8px; width: 8px; padding: 0; background-color: #f6db30;" align="left" valign="bottom" height="8"><img src="https://www.vka.nl/wp-content/uploads/2017/03/hoekje-onder.gif" alt="" width="8" height="8" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p style="color: #ffffff;"><br /><br />.</p>

Answer 1

你看到的不是蓝色线条，我认为你看到的是微小的蓝色文本。你看到的是它的一个非常小的版本：$!photoUrl$!photoUrl。我认为Outlook忽略了font-size:0;，并且可能不会处理您在图像之前添加到代码中的第二个URL。

你并没有发布所有的代码，但是你发布的代码有一些问题。您没有关闭表，也没有关闭在图像之前启动的href。

为了让你的表格在Outlook中运行得更好，我添加了一些样式类来帮助Outlook以更好的方式显示表格：border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;。

我添加了一个样式属性display: block;，它可以帮助Outlook更好地显示图像。

请尝试以下代码：

<!-- [if gte mso 9]>
<xml>
  <o:OfficeDocumentSettings>
  <o:AllowPNG/>
  <o:PixelsPerInch>96</o:PixelsPerInch>
  </o:OfficeDocumentSettings>
</xml>
<![endif]-->
<p>&nbsp;</p>
<table border="0" width="400" cellspacing="0" cellpadding="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
  <tbody>
    <tr>
      <td style="font-size: 0; mso-line-height-rule: exactly; line-height: 0 !important; border-collapse: collapse;" valign="bottom">
        <a href="$!photoUrl" target="_blank">
            <img src="$!photoUrl" alt="Foto" width="132" height="160" border="0" style="display: block;" />
        </a>
      </td>
    </tr>
  </tbody>
</table>

让我知道结果。

祝好运。