使交叉客户端HTML电子邮件中的元素重叠？ [英] Make elements overlap in cross-client HTML emails?
问题描述
在浏览器的普通HTML中，使元素重叠很容易。
但是在HTML电子邮件的黑暗世界中，其座右铭是1996年的代码，因为Outlook使用来自 MS Word的呈现引擎而且Gmail几乎删除了所有内容，每种方法都会使两个元素重叠，因为客户端支持较差，我认为这种方法不适用： 是否有任何东西可以可靠地用于在跨客户端HTML电子邮件中的元素之间创建重叠？和/或以任何方式使元素从边界框中伸出而不影响其邻居的位置？例如，假设你想做这样的事情（显示边界框的虚线和背景），其中大图像挂在下方的行上，而不是将其推倒下去...... < img src =https://i.stack.imgur.com/6IkWH.pngalt =在这里输入图片描述> 元素， 有没有什么办法可以解决客户端兼容性问题？ 对话稍迟，但这个相似的答案是你正在寻找的技术。 你的例子是但是跨越行和列的时候要复杂得多。我迎接挑战： 这与您所得到的相近。你不能做非矩形，所以身体顶部的Header必须在它自己的单元格中。 In normal HTML for browsers, making elements overlap is easy. But in the dark world of HTML email, where the motto is "code like it's 1996" because Outlook uses the rendering engine from MS Word and Gmail removes almost everything, every method for making two elements overlap that I can think of is unsuitable due to poor client support: Is there anything that can be reliably used to create overlap between elements in cross-client HTML emails? And/or any way to make an element extend out from its bounding box without affecting the positioning of its neighbours? For example, suppose you wanted to do something like this (dashed lines and backgrounds showing bounding boxes), where the large image hangs down over the row below rather than pushing it down... An element (in this case, an Is there any way to do that without major client compatibility problems? EDIT: Just found this piece of crazy twisted genius: making table cells overlap using colspans and rowspans. This could be an option, not yet thoroughly tested its cross-client rendering though, any info from prior experience or research is welcome. Assume we're making a newsletter where we can't predict what clients our customers will be using, so we have to support popular mainstream email clients: Outlook, Gmail, Yahoo, Hotmail, Thunderbird, iOS/OSX, Android... A little late to the conversation, but this similar answer is the technique you are looking for. Your example is a lot more complex however as you are spanning over both rows and columns. I'm up for the challenge: This is as close as you'll get. You can't make non-rectangles, so the top Header in the body has to be in it's own cell. 这篇关于使交叉客户端HTML电子邮件中的元素重叠？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
Position 在许多客户端中不受支持，因此不存在 position：absolute; 或 position：relative; 和no top ， left ，右侧 ...
overflow：visible; 如果< img> 标签都需要明确的高度和宽度，或者在布局的位置，宽度和高度小于元素内容的大小，由于缺少 float 支持以及< div> s的错误处理，大多数情况下都必须基于表格。 （也就是说，如果有可能，基于此的东西似乎是最有可能的选择）
< img> ，但不一定是图片）与其他元素（在这种情况下，下面的行 - 但不一定是单独的行）重叠，而不会将它们推开。
$ b 编辑：刚刚找到这片疯狂的扭曲天才：使用表格和单行记录使表格单元重叠。这可能是一个选择，但还没有彻底地测试过它的跨客户端呈现，但任何来自以往经验或研究的信息都是值得欢迎的。
假设我们正在制作一份时事通讯，我们无法预测客户将使用哪些客户端，所以我们必须支持流行的主流电子邮件客户端：Outlook，Gmail，Yahoo，Hotmail，Thunderbird，iOS / OSX，Android。 ..
< table width =600border =0cellpadding =0 CELLSPACING = 0 >
< tr><！ - 需要此行才能在Outlook中强制列宽 - >
< td width =100>
< / td>
< td width =300>
< / td>
< td width =200>
< / td>
< / tr>
< tr>
< td width =400valign =topheight =80colspan =2bgcolor =＃bbbbbb>
标题在这里
< / td>
< td width =200valign =topheight =120rowspan =2bgcolor =＃dddddd>
Image Here
< / td>
< / tr>
< tr>
< td width =100valign =topheight =540rowspan =2bgcolor =＃cccccc>
列< br> ...< br> ...< br> ...
< / td>
< td width =300valign =topheight =40bgcolor =＃aaaaaa>
标题1
< / td>
< / tr>
< tr>
< td width =500valign =topheight =500colspan =2bgcolor =＃eeeeee>
内容< br> ...< br> ...< br> ...
< / td>
< / tr>
< / table>
Position isn't supported in many clients, so no position: absolute; or position: relative; and no top, left, right...overflow: visible; and a width and height that is less than the size of the element's contents doesn't work very well when <img> tags all need explicit heights and widths or where layouts, due to lack of float support and erratic treatment of <div>s, by necessity need to be based on tables most of the time. (that said, if anything is possible, something based on this seems like the most likely option)<img>, but not necessarily an image) overlaps other elements (in this case, the row below - but not necessarily a separate row) without pushing them away.
<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>
