html画像Outlookで青い線が表示される

Question

私たちは電子メールを作成しています（CloudpagesのHTMLコードを使用しています）。Gmailでは完璧に動作します。&アップルメールです。ブラウザまたはAppleメールの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;を無視していて、画像の前にコードに追加している2番目のURLを処理していない可能性があると思います。

あなたのコードはすべて投稿していませんが、投稿した内容にはいくつかの問題があります。あなたはテーブルを閉じなかった、あなたはイメージの前に始まったhrefを閉じなかった。

Outlookでテーブル機能を改善するために、Outlookにテーブルをより適切に表示するためのスタイルクラスをいくつか追加しました：border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;。

Outlookに画像を表示するのに役立つスタイル属性display: block;を追加しました。

は、代わりにこのコードを試してみてください。

<!-- [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> 

は私が結果を知ってみましょう。

幸運。