17

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

但是在 HTML 电子邮件的黑暗世界中，座右铭是“像 1996 年一样的代码”，因为 Outlook 使用MS Word的渲染引擎，Gmail 几乎删除了所有内容，我能想到的使两个元素重叠的每种方法都不合适，因为客户支持不佳：

  • Position许多客户端不支持，所以 no position: absolute;orposition: relative;和 no top, left, right...
  • Gmail 和其他人会删除负边距。所以，没有负利润。
  • 当标签都需要明确的高度和宽度或布局时，由于缺乏支持和不稳定的处理overflow: visible;，使用宽度和高度小于元素内容大小的元素的“悬垂”效果不佳s，在大多数情况下必然需要基于表格。（也就是说，如果有任何可能，基于此的东西似乎是最有可能的选择）<img>float<div>
  • 不涉及背景图片是一个选项，因为这些已在 Gmail 和其他人中删除
  • 甚至不要考虑尝试在 HTML 电子邮件中使用 CSS3 或 javascript...

是否有任何东西可以可靠地用于在跨客户端 HTML 电子邮件中的元素之间创建重叠？和/或任何使元素从其边界框伸出而不影响其邻居定位的方法？

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

在此处输入图像描述

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

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

编辑：刚刚发现了这个疯狂的扭曲天才：使用 colspans 和 rowspans 使表格单元格重叠。这可能是一个选项，但尚未彻底测试其跨客户端渲染，欢迎任何来自先前经验或研究的信息。

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

4

2 回答 2

3

谈话有点晚了，但这个类似的答案是你正在寻找的技术。

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

<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>

这是尽可能接近的。您不能制作非矩形，因此正文中的顶部 Header 必须在它自己的单元格中。

于 2014-03-21T18:03:36.297 回答
1

天才的解决方案在大多数情况下都有效。但是对于 Outlook 2007、2010 和 2013，它不起作用，因为行跨度将被删除。

于 2013-04-26T07:35:33.670 回答