Question

我在一家销售社交媒体管理和数字杂志杂志的媒体公司工作。我的工作是为邮件广告准备一个HTML邮件模板。我使用HTML但从未制作过HTML邮件。我找到了几点使我的邮件模板更适合邮件客户端。我的问题是，当我将我的html邮件发送到outlook（我猜2013年的展望）时，收件人无法正确显示邮件。表格和图像看起来与我创建的不同。我的第二个问题是，是否有办法阻止该Outlook或其他邮件客户端不阻止图像？这是我的HTML代码。如果你帮助我，我将非常感激。这是我的HTML代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>HTML Mail Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <table align="center" border="0" cellpadding="0" cellspacing="0" width="600">
 <tr>
    <tr>
  <td bgcolor="#ee4c50" style="padding: 30px 30px 30px 30px;">
   <table border="0" cellpadding="0" cellspacing="0" width="100%">
 <tr>
  <td bgcolor="white" align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0;"> 
   <a href="http://www.google.com.tr"><img src="http://financesonline.com/uploads/2014/06/erp2.png" alt="Enterprise Resource Planning" width="400" height="230" style="display: block;" />
    </a>
  </td>
 </tr>
 <tr>
  <td bgcolor="#ffffff" style="padding: 40px 30px 40px 30px;">
 <table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
   <td>
    Lorem ipsum dolor sit amet!
   </td>
  </tr>
  <tr>
   <td align="justify" style="padding: 20px 0 30px 0;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet varius lorem, at porta arcu. Nullam vitae sollicitudin est. Curabitur nisl lorem, feugiat vel tortor eget, sollicitudin varius purus. Proin lacinia orci justo, sed eleifend enim vehicula blandit. Donec arcu est, varius vel aliquet quis, sodales sed ipsum. Nulla varius fermentum ligula sed rutrum. Cras eget tellus condimentum, efficitur massa sed, eleifend ex. Mauris congue fringilla enim aliquam luctus. Praesent at placerat ante.
   </td>
  </tr>
 <tr>
  <td>
   <table border="0" cellpadding="0" cellspacing="0" width="100%">
 <tr>
  <td width="260" valign="top">
   <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
     <td>
      <img src="http://www.erpsafety.com/assets/img/ERP-Logo%20(2).png" alt="" width="100%" height="140" style="display: block;" />
     </td>
    </tr>
    <tr>
     <td style="padding: 25px 0 0 0;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
     </td>
    </tr>
   </table>
  </td>
  <td style="font-size: 0; line-height: 0;" width="20">
   &nbsp;
  </td>
  <td width="260" valign="top">
   <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
     <td>
      <img src="https://www.arckcloud.com/images/erp-logo2.png" alt="" width="100%" height="140" style="display: block;" />
     </td>
    </tr>
    <tr>
     <td style="padding: 25px 0 0 0;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
     </td>
    </tr>
   </table>
  </td>
 </tr>
</table>
</td>
 </tr>
 <tr>
  <td bgcolor="#ee4c50" style="padding: 30px 30px 30px 30px;">
   <table border="0" cellpadding="0" cellspacing="0" width="100%">
 <tr>
  <td>
   Column 1
  </td>
  <td>
   Column 2
  </td>
 </tr>
</table>
  </td>
 </tr>
</table>
</head>
</html>

Answer 1

问题归因于Outlook scaling the content to a larger size，强制您的图片和其他声明的项目调整大小。这可能会破坏你的布局，你真的无法改变它 - 它是订户计算机上的设置客户端。

解决此问题的最佳方法是使用MSO conditionals换行到单个表中，并将每列分隔为单独的td。或者使用TD or TH stack（TD no longer works in Android）进行媒体查询。 Outlook将拉伸表以适应两列，但不会拉伸表以适应两个表，而是强制第二个表位于第一个表之下。

出于安全原因，实际上没有办法绕过电子邮件客户端阻止图像 - 就像没有办法包含客户端JavaScript一样。有时您可以使用embedded images，但这会带来许多陷阱和不稳定的兼容性。它也没有真正解决问题，因为大多数接受嵌入式图像的客户端默认情况下都不会阻止图像，这使它变得多余。

HTML Mail Outlook - 表和图像损坏

1 个答案: