我已经开发了十多年的网站了,但很快就发现,在为电子邮件客户开发时,我开发网络的许多习惯都没用.这让我感到非常沮丧,所以我想我会提出一个问题,希望能够为像我这样的人发现最佳实践和必要的考虑因素,这些人可能会不时地设计gmail,outlook等.

示例: <style>...</style> vs内联CSS.

简而言之:什么从网络世界转移到电子邮件世界,什么没有.

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

但是在HTML电子邮件的黑暗世界中,其座右铭是"像1996年的代码",因为Outlook使用MS Word和Gmail中的渲染引擎几乎删除了所有内容,因此我认为两种元素重叠的方法都不合适客户支持不佳:

• Position在很多客户不支持,所以没有position: absolute;或position: relative;没有top,left,right...
• Gmail和其他人会删除负边距.所以,没有负利润.
• overflow: visible;当<img>标签全部需要明确的高度和宽度或布局时,由于缺少float支撑和不稳定的处理,使用元素的"悬垂" 以及宽度和高度小于元素内容大小的元素不能很好地工作的<div>S,必然需要根据表上的大部分时间.(也就是说,如果有可能,基于此的东西似乎是最可能的选择)
• 没有任何涉及背景图片的选项是可选的,因为这些已在Gmail和其他人中删除
• 甚至不想在HTML电子邮件中尝试使用CSS3或javascript ...

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

例如,假设你想做这样的事情(虚线和背景显示边界框),大图像挂在下面的行而不是向下推...

元素(在这种情况下,<img>但不一定是图像)与其他元素重叠(在这种情况下,下面的行 - 但不一定是单独的行)而不将它们推开.

没有主要的客户端兼容性问题,有没有办法做到这一点？

编辑:刚刚发现这片疯狂扭曲的天才:使用colspans和rowpans使表格细胞重叠.这可能是一个选项,但尚未对其跨客户端渲染进行全面测试,但欢迎来自之前的经验或研究的任何信息.

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

我正在编写一个HTML电子邮件,除了Outlook 2013之外,它在每个主要的电子邮件客户端中看起来都很好,这会在我的图像切片之间添加垂直间隙.遗憾的是,我的计算机上没有安装Outlook 2013,因此很难测试,但是我的客户端的屏幕截图显示它看起来像这样 -

我的代码在这里可用 - HTML版本.

我不知道我还能做些什么来消除间隙 - 我已经将tds和图像的行高设置为零,我已将图像设置为显示:块,我将表设置为边框0,cellpadding和cellspacing为零,以及border-collapse:collapse.我还能做些什么来解决它？

编辑添加 - 我实际上不确定图像或表格行之间是否存在间隙.从截图中看,它实际上看起来可能是表格行.

问题

我正在处理包含项目列表的HTML电子邮件，并且考虑到电子邮件客户端的限制，我想知道以下设计是否可行。

目前，我为每个项目都有一个表格，其中包含两个单元格（我们将其称为item-table）。第一个单元格（info-cell）的高度可变，包含商品信息和链接。第二个单元格（image-cell）包含图像，并且高度也可变。这个问题与第一个单元格有关。

我有一个嵌套info-cell有两行的表，每行有一个单元格。我们将这些单元格称为info-cell-top和info-cell-bottom。

理想的结果

期望的结果是info-cell-top与的顶部对齐，并与info-cell-bottom的底部对齐info-cell，而与的高度无关item-table。

我尝试过的

由于这是标记的电子邮件，我不能使用rowspan="2"的image-cell解决这个问题。虽然它适用于某些桌面电子邮件客户端，但对于移动客户端，图像单元将完全消失。

我还尝试了info-cell同时使用height="100%"和将内部表拉伸到最大高度height="1"。

这两种解决方案在浏览器中看起来都不错，但不适用于电子邮件。

代码

也可以在jsfiddle上玩。

<table cellspacing="0" cellpadding="0" border="0" width="100%" style="border-top: 1px solid #bbbbbb;">
    <tbody>
        <tr>
            <td style="padding: 16px 0px; border-bottom: 1px solid #bbbbbb;">
                <table cellspacing="0" cellpadding="0" border="0" width="100%" height="1">
                    <tbody>
                        <tr>
                            <td style="vertical-align: top;">
                                <table cellspacing="0" cellpadding="0" border="0" width="100%" height="100%"> …