调整HTML电子邮件以在不同客户端呈现相同内容

Question

我正在将基于html的电子邮件放在一起，以便分发给我们的订阅者。但是，当我在不同的客户中呈现它时，它会略有不同。我看到的主要区别在于，在某些客户端中，主图片向左偏移，网格框可能会根据所包含的行数而有不同的高度。我的目标是为多行预留足够的空间，以便所有的盒子都是相同的高度。任何人都可以帮助我找到问题领域？图片中存在问题的客户端是Outlook 2003，正确的是Chrome中的gmail。

因为html太长而无法放入到计算器中，所以我会提取生成包含偏移图片的主项目以及各种大小的网格框。

奇怪的偏移：

<tr> 
    <td height="15" style="text-align:center" width="100%"></td></tr><tr> 
    <td border="0" width="600" style="text-align:center" align="center"> 
     <a href="#147d3134c7aae5a7_147d3131083faac4_" style="border:none"><img alt="" border="0" width="600" height="400" align="top" src="https://ci5.googleusercontent.com/proxy/vTfZfEiq_KN8RAd8D80hICfjyqCddT8oyJJNwnuvZ8D7jg4mbFEbJab51vi_ZiMrHNRitMhAtMu_hSU9Eiy1iNjIEz8YmmlkCx6M6C1lQmBkC6jm7ye1uSoKDMmq8XVo-qD0ZXA=s0-d-e1-ft#https://img.grouponcdn.com/deal/3YewhZBYt2iywAzJsuHy/ZP-960x582/v1/t440x300.jpg" style="width:600px;min-height:400px"></a> 
    </td> 
</tr> 
<tr> 
    <td> 
     <table align="center" border="0" cellpadding="0" cellspacing="0" width="600"> 
      <tbody> 
       <tr><td> 
        <table width="100%" border="0" cellpadding="10" cellspacing="0"> 
         <tbody> 
          <tr> 
           <td border="0" bgcolor="#403e3e" style="background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:16px;font-weight:normal;color:#ffffff;line-height:18px;text-align:left"> 
            <img height="23" style="min-height:23px" src="https://ci3.googleusercontent.com/proxy/FYU-iKV58t7t1Y09W8HkB8ZvJUWC53Zs279rZhUHmFlI6GwdK9THzm1007Ty7LgiJAlwsOhpGzsZL7-IU-1WHk5fdBo80RCk0b8_Xc_LfDNnqw=s0-d-e1-ft#http://www.example.com/images/logos/partners/small/groupon.png" alt="Gourmet All-Inclusive 4.5-Star Playa del Carmen Resort"> 
           </td> 
           <td border="0" bgcolor="#403e3e" style="background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:16px;font-weight:normal;color:#ffffff;line-height:18px;text-align:right"> 

            <span>$1179</span> 
           </td> 
          </tr> 
          <tr> 
           <td border="0" height="30" colspan="2" valign="top" bgcolor="#403e3e" style="vertical-align:top;height:30px;background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:16px;font-weight:normal;color:#ffffff;line-height:18px;text-align:left"> 
            <a href="http://-featured_url-" style="text-decoration:none!important;color:#ffffff!important;font-size:16px" target="_blank">Gourmet All-Inclusive 4.5-Star Playa del Carmen Resort</a> 
           </td> 
          </tr> 
          <tr> 
           <td border="0" height="30" colspan="2" valign="top" bgcolor="#403e3e" style="vertical-align:top;height:30px;background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:16px;font-weight:normal;color:#ffffff;line-height:18px;text-align:left"> 
            Branchville, NJ, USA 
           </td> 
          </tr> 
         </tbody> 
        </table> 
       </td> 
      </tr></tbody> 
     </table> 
    </td> 
</tr> 

各种大小的盒子：

<tr> 
    <td align="center" valign="top"> 
    <table align="center" cellpadding="0" cellspacing="0" width="600"> 
     <tbody> 
     <tr> 
      <td> 
      <table align="left" border="0" cellpadding="0" cellspacing="0" style= 
      "background-color:#403e3e" width="290"> 
       <tbody> 
       <tr> 
        <td border="0" width="290"><a href= 
        "#147d3134c7aae5a7_147d3131083faac4_" style="border:none"><img alt= 
        "" border="0" height="180" src= 
        "https://ci4.googleusercontent.com/proxy/2iCMcbaq9UymG0sHx0JXF9wuBHu-8ibBC66U7s1q7i7Lo5zNS83olrIm7NNBuhybni869s64dxK1_5u13bYUudnGh3fh680G2yLGIc9rQ_YFWe2YLdExA4UUO5A2j_7rJlhLmXQ=s0-d-e1-ft#https://img.grouponcdn.com/deal/rHsqnohK7vGd79o7hGUq/VQ-960x582/v1/t440x300.jpg" 
        style="width:290px;min-height:180px;display:block" width= 
        "290" /></a></td> 
       </tr> 

       <tr> 
        <td> 
        <table border="0" cellpadding="7" cellspacing="0" width="100%"> 
         <tbody> 
         <tr> 
          <td border="0" bgcolor="#403E3E" style= 
          "background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:18px;text-align:left"> 
          <img height="15" src= 
          "https://ci3.googleusercontent.com/proxy/FYU-iKV58t7t1Y09W8HkB8ZvJUWC53Zs279rZhUHmFlI6GwdK9THzm1007Ty7LgiJAlwsOhpGzsZL7-IU-1WHk5fdBo80RCk0b8_Xc_LfDNnqw=s0-d-e1-ft#http://www.example.com/images/logos/partners/small/groupon.png" 
          style="min-height:15px" alt="Groupon" /></td> 

          <td border="0" bgcolor="#403E3E" style= 
          "background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:15px;text-align:right"> 
          <span>$285</span></td> 
         </tr> 

         <tr> 
          <td border="0" height="30" valign="top" bgcolor="#403E3E" 
          colspan="2" style= 
          "overflow:hidden;vertical-align:top;height:30px;background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:15px;text-align:left"> 
          <a href="http://-featured_url-" style= 
          "text-decoration:none;color:#ffffff;font-size:13px" target= 
          "_blank">Luxury Villas &amp; Gourmet Meals in Puerto 
          Vallarta</a></td> 
         </tr> 

         <tr> 
          <td border="0" height="30" valign="top" bgcolor="#403E3E" 
          colspan="2" style= 
          "vertical-align:top;height:30px;background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:15px;text-align:left"> 
          Puerto Vallarta, Mexico</td> 
         </tr> 
         </tbody> 
        </table> 
        </td> 
       </tr> 

       <tr> 
        <td border="0" bgcolor="#FFFFFF" height="15" width="100%"> 
        &nbsp;</td> 
       </tr> 
       </tbody> 
      </table> 

      <table align="right" border="0" cellpadding="0" cellspacing="0" style= 
      "background-color:#403e3e" width="290"> 
       <tbody> 
       <tr> 
        <td border="0" width="290"><a href= 
        "#147d3134c7aae5a7_147d3131083faac4_" style="border:none"><img alt= 
        "" border="0" height="180" src= 
        "https://ci6.googleusercontent.com/proxy/rhQa6yfks-smgpfVft9mFyFjy-buDbxqyC7skH8tBNv-KfX5FspdLl6GpcdipcquRGoQreMi29C5cmhGaXFp8c6kF4P84Duam0ZfHGGqQZUudPbo5dXvcAOmj2qFfCfTB3KnZEg=s0-d-e1-ft#https://img.grouponcdn.com/deal/deYNpeAfGJxahmvmev46/SV-960x582/v1/t440x300.jpg" 
        style="width:290px;min-height:180px;display:block" width= 
        "290" /></a></td> 
       </tr> 

       <tr> 
        <td> 
        <table border="0" cellpadding="7" cellspacing="0" width="100%"> 
         <tbody> 
         <tr> 
          <td border="0" bgcolor="#403E3E" style= 
          "background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:18px;text-align:left"> 
          <img height="15" src= 
          "https://ci3.googleusercontent.com/proxy/FYU-iKV58t7t1Y09W8HkB8ZvJUWC53Zs279rZhUHmFlI6GwdK9THzm1007Ty7LgiJAlwsOhpGzsZL7-IU-1WHk5fdBo80RCk0b8_Xc_LfDNnqw=s0-d-e1-ft#http://www.example.com/images/logos/partners/small/groupon.png" 
          style="min-height:15px" alt="Groupon" /></td> 

          <td border="0" bgcolor="#403E3E" style= 
          "background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:15px;text-align:right"> 
          <span>$99</span></td> 
         </tr> 

         <tr> 
          <td border="0" height="30" valign="top" bgcolor="#403E3E" 
          colspan="2" style= 
          "overflow:hidden;vertical-align:top;height:30px;background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:15px;text-align:left"> 
          <a href="http://-featured_url-" style= 
          "text-decoration:none;color:#ffffff;font-size:13px" target= 
          "_blank">Charming Northern Michigan Inn near Lakes</a></td> 
         </tr> 

         <tr> 
          <td border="0" height="30" valign="top" bgcolor="#403E3E" 
          colspan="2" style= 
          "vertical-align:top;height:30px;background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:15px;text-align:left"> 
          Denton Township, MI, USA</td> 
         </tr> 
         </tbody> 
        </table> 
        </td> 
       </tr> 

       <tr> 
        <td border="0" bgcolor="#FFFFFF" height="15" width="100%"> 
        &nbsp;</td> 
       </tr> 
       </tbody> 
      </table> 
      </td> 
     </tr> 
     </tbody> 
    </table> 
    </td> 
</tr> 

这是它应该如何看图片（GMAIL）：

这是怎样一个画面它看起来在Outlook 2003中：

Answer 1

你的问题是一个无处不在的故事....几点建议。

• 复位尽可能多的默认值，尽可能
• 使用表，但CELLPADDING CELLSPACING和边界值重置为0
• 不使用列跨度，行跨度，因为一些客户端不支持它，休息客户端可以不同的方式处理它
• 你需要双/三宣布CSS值（总是写CSS内联，并在头型）
• 没有利润，只是填充值，只有在TD元素
• 总是给确切的图像宽度和高度（并应用display：block来删除下面的不需要的空间）
• 在body上设置font-size 0，然后在需要的每个元素上设置font-size，以避免内联元素上的不可见字符。

TD上的高度值有时会起作用，有时不起作用，这就是为什么很多ppl使用间隔图像。我建议空TD与填充顶：30PX是非常稳定....

我是一个前端开发者@ EDMdesigner.com