html - 让元素在跨客户端 HTML 电子邮件中重叠？

Question

在浏览器的普通 HTML 中，使元素重叠很容易。

但是在 HTML 电子邮件的黑暗世界中，格言是“像 1996 年一样的代码”，因为 Outlook 使用 MS Word 的呈现引擎，而 Gmail 几乎删除了所有内容，包括制作两个元素的所有方法由于客户支持不佳，我能想到的重叠是不合适的:

• Position许多客户端不支持，所以没有position: absolute;或 position: relative;没有 top , left , right ...
• 负边距 已被 Gmail 和其他工具移除。因此，没有负利润。
• 使用 overflow: visible; 元素的“悬垂” 并且小于元素内容大小的宽度和高度在 <img> 时效果不佳。由于缺少 float，标签都需要明确的高度和宽度或布局。支持和不稳定的处理<div>小号，by necessity need to be based on tables大多数时候。 (也就是说，如果有任何可能，基于此的东西似乎是最有可能的选择)
• 没有涉及背景图片的选项，因为这些在 Gmail 和其他应用程序中已被删除
• 甚至不要考虑在 HTML 电子邮件中尝试使用 CSS3 或 javascript...

有没有什么可以可靠地用于在跨客户端 HTML 电子邮件的元素之间创建重叠？和/或在不影响其相邻元素定位的情况下使元素从其边界框延伸出去的任何方法？

例如，假设您想做这样的事情(虚线和背景显示边界框)，其中大图像悬垂在下面的行上而不是将其向下推...

一个元素(在本例中为 <img>，但不一定是图像)与其他元素(在本例中为下一行 - 但不一定是单独的行)重叠而不将它们推开。

有没有什么办法可以做到这一点而不会出现主要的客户端兼容性问题？

编辑:刚刚找到this piece of crazy twisted genius :使用 colspans 和 rowspans 使表格单元格重叠。这可能是一个选项，但尚未彻底测试其跨客户端呈现，欢迎提供任何来自先前经验或研究的信息。

---

假设我们正在制作一份时事通讯，我们无法预测客户将使用哪些客户端，因此我们必须支持流行的主流电子邮件客户端:Outlook、Gmail、Yahoo、Hotmail、Thunderbird、iOS/OSX、Android。 ..

Answer 1

谈话有点晚了，但是this similar answer是您正在寻找的技术。

您的示例要复杂得多，因为您跨越了行和列。我准备好迎接挑战了:

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr><!-- This row is needed to enforce col widths in Outlook -->
    <td width="100">
    </td>
    <td width="300">
    </td>
    <td width="200">
    </td>
  </tr>
  <tr>
    <td width="400" valign="top" height="80" colspan="2" bgcolor="#bbbbbb">
      Title Here
    </td>
    <td width="200" valign="top" height="120" rowspan="2" bgcolor="#dddddd">
      Image Here
    </td>
  </tr>
  <tr>
    <td width="100" valign="top" height="540" rowspan="2" bgcolor="#cccccc">
      Column<br>...<br>...<br>...
    </td>
    <td width="300" valign="top" height="40" bgcolor="#aaaaaa">
      Heading 1
    </td>
  </tr>
  <tr>
    <td width="500" valign="top" height="500" colspan="2" bgcolor="#eeeeee">
      Content<br>...<br>...<br>...
    </td>
  </tr>
</table>

这已经很接近了。您不能制作非矩形，因此正文中的顶部标题必须位于它自己的单元格中。