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

Question

我正在整理一个基于 html 的电子邮件，以便分发给我们的订阅者。但是，当我在不同的客户端中渲染它时，它会略有不同。我看到的主要区别是，在某些客户端中，主图片向左偏移，并且网格框可能具有不同的高度，具体取决于包含的行数。我的目标是为多行保留足够的空间，以便所有框的高度相同。谁能帮我找到问题所在？图中出现问题的客户端是Outlook 2003，正确的是Chrome中的gmail。

因为 html 太长而无法放入 stackoverflow，所以我包含了生成带有偏移图片的主要元素的摘录，以及各种大小的网格框。

奇怪的偏移量:

<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 和 border 值重置为 0
• 不要使用colspan、rowspan，因为少数客户端不支持，其余客户端可能处理不一样
• 您需要双重/三次声明 css 值(始终以 head 样式内联编写 css)
• 没有边距，只有填充值，并且只在 TD 元素上
• 始终为图像提供准确的宽度和高度，(并应用 display:block 删除下方不需要的空格)
• 在 body 上设置 font-size 0，然后在每个需要的元素上设置 font-size，以避免内联元素上出现不可见字符。

TD 上的高度值有时有效，有时无效，这就是为什么很多人使用间隔图像。我建议使用 padding-top:30px 的空 TD 非常稳定....

我是一名前端开发人员@EDMdesigner.com