HTML 在 Outlook 2010 中出现偏差答案

【问题标题】：HTML is skewing in Outlook 2010HTML 在 Outlook 2010 中出现偏差
【发布时间】：2013-10-26 02:31:50
【问题描述】：

这在普通客户端中运行良好，但我们知道 Outlook 很难使用。对我来说看起来不错，但有人能告诉我为什么这不会在 Outlook 中呈现吗？

<table id="contentArea">
      <tr>
        <td>
        
          <p>Welcome to the TeraTitan family ${user['FirstName']},</p>
          <p>Please tell us which services you are interested in currently:</p>
          
          
          <table align="center">
          <tr align="center">
          <td><a href="http://www.teratitan.com/info/mortgage"><img height="100px" width="100px" src="http://www.yourwealth.co.uk/sites/default/files/titleimage-mortgages.jpg"><p style="font-family:Verdana, Geneva, sans-serif; font-size:12px">Mortgages</a></p></td>
          <td><a href="http://www.teratitan.com/info/savings"><img height="100px" width="100px" src="http://t0.gstatic.com/images?q=tbn:ANd9GcS0BNv0q30KMSumGx6p8Vp0UYwB_3IfBUD3HfKsruNW-qBb5qdUd4UPi1d9"><p style="font-family:Verdana, Geneva, sans-serif; font-size:12px">Savings</a></p></td>
          <td><a href="http://www.teratitan.com/info/homeequity"><img height="100px" width="100px" src="http://www.clockwise.coop/Clockwise/media/SiteImages/News%20Items/%C2%A35-gift.jpg?width=200&height=200&ext=.jpg"><p style="font-family:Verdana, Geneva, sans-serif; font-size:12px">Home Equity</a></p></td>
          </tr>
          
          
          </table>
          <p>You can also visit us on-line at <a href="http://www.teratitan.com">TeraTitan</a>, or call us with any questions you may have at 800-555-1212.</p>
        </td>
      </tr>
    </table>
    <!-- End Table for content-->

【问题讨论】：

究竟是什么不渲染？你能给我们看一下对比截图吗？您可能还想为 html 电子邮件正确设置图像样式。 (display:block; 和 img 属性border="0")
img 托管站点在工作中被阻止 - 即使您建议进行这些更改，它也会突然向右移动。即使我将尺寸调整为 100x100，图像又变大了。
您是否尝试将文本放在表格的另一行？ Outlook 会尽力在单个表格单元格中浮动元素，但它无法猜测您真正想要做什么。 html-emails 的诀窍是尽可能按类型分隔元素。如果你有文本和图像，那么文本应该在它们自己的单元格中，以及图像。表格单元格的一个元素也将帮助您准确查看问题所在。

标签： html outlook html-email outlook-2010

【解决方案1】：

我和 R Lacome 在一起。渲染问题到底是什么？

此外，似乎还有一些“草率”的编码问题。有时这并没有什么不同，但如果您的代码“草率”，您将不知道真正的问题在哪里。

下面是经过一些调整的清理 HTML。尝试运行它，看看它是否解决了您的渲染问题。我还应该注意，如果没有大量内联 CSS <p> 标签，在电子邮件客户端中并不能提供很多一致性。

  <table id="contentArea" width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td align="left">
        <p>Welcome to the TeraTitan family ${user['FirstName']},</p>
        <p>Please tell us which services you are interested in currently:</p>
      </td>
    </tr>
    <tr>
      <td align="left">
        &nbsp;
      </td>
    </tr>
    <tr>
      <td align="center">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td align="center">
              <a href="http://www.teratitan.com/info/mortgage">
                <img height="100px" width="100px" src="http://www.yourwealth.co.uk/sites/default/files/titleimage-mortgages.jpg">
                <p style="font-family:Verdana, Geneva, sans-serif; font-size:12px">Mortgages</p>
              </a>
            </td>
            <td align="center">
              <a href="http://www.teratitan.com/info/savings">
                <img height="100px" width="100px" src="http://t0.gstatic.com/images?q=tbn:ANd9GcS0BNv0q30KMSumGx6p8Vp0UYwB_3IfBUD3HfKsruNW-qBb5qdUd4UPi1d9">
                <p style="font-family:Verdana, Geneva, sans-serif; font-size:12px">Savings</p>
              </a>
            </td>
            <td align="center">
              <a href="http://www.teratitan.com/info/homeequity">
                <img height="100px" width="100px" src="http://www.clockwise.coop/Clockwise/media/SiteImages/News%20Items/%C2%A35-gift.jpg?width=200&height=200&ext=.jpg">
                <p style="font-family:Verdana, Geneva, sans-serif; font-size:12px">Home Equity</p>
              </a>
            </td>
          </tr>
        </table>
      </td>
    </td>
    <tr>
      <td align="left">
        &nbsp;
      </td>
    </tr>
    <tr>
      <td align="left">
        <p>You can also visit us on-line at <a href="http://www.teratitan.com">TeraTitan</a>, or call us with any questions you may have at 800-555-1212.</p>
      </td>
    </tr>
  </table>

  <!-- End Table for content-->

【讨论】：