我有一封带有动态高度但固定宽度的<td> 的 HTML 电子邮件。
如何向此单元格添加（垂直）重复背景图像，该单元格也适用于 Outlook 2007、2010、2013 和 Gmail？
该单元格中没有任何内容，因为它“只是”用于视觉目的。但它在我的内容单元格旁边，因此需要在高度上是动态的。
【问题讨论】：
标签： html css email outlook-2007
2013 年 8 月更新：我怀疑这对 John 仍然有用。 B，但我只是想为可能遇到此问题的任何人提供快速更新。
我能够解决我之前描述的问题，并阻止背景图像从纯色背景下方窥视。
这是更新后的代码：
<table background="http://i.imgur.com/n8Q6f.png" cellpadding="0" cellspacing="0" width="200">
<tr>
<td>
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 200px;">
<v:fill type="tile" src="http://i.imgur.com/n8Q6f.png" color="#f6f6f6" />
<v:textbox style="mso-fit-shape-to-text: true;" inset="0,0,0,0">
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="100"></td>
<td bgcolor="#ffffff" width="100">
The<br/>
background<br/>
image<br/>
on<br/>
the<br/>
left<br/>
will<br/>
stretch<br/>
to<br/>
the<br/>
height<br/>
of<br/>
this<br/>
content.
</td>
</tr>
</table>
<!--[if gte mso 9]>
<p style="margin:0;mso-hide:all"><o:p xmlns:o="urn:schemas-microsoft-com:office:office"> </o:p></p>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
这里的修复是行
<p style="margin:0;mso-hide:all"><o:p xmlns:o="urn:schemas-microsoft-com:office:office"> </o:p></p>
就在文本框结束之前，我已经解释了这个in the Microsoft Office TechCenter thread I referred to in a previous comment。
我原来的回答：
我已经能够几乎破解这个，但不完全。所以我在这里发布这个，希望有人可以在它的基础上发布一个完整的解决方案。
我很确定您无法获得背景图像来实际填充表格单元格或其他未定义高度的区域。但是，您可以使用 [VML TextBox][1] 和 [VML Fill Element][2] around 表格，定义背景图像和后备颜色，可以拉伸到内容。
然后，您可以在此文本框中放置一个包含两列的表格，其中一个具有透明背景，另一个具有纯色背景，以模拟您描述的布局。
在文本框周围，为非 Outlook 电子邮件客户端使用相同的背景图像和后备颜色环绕另一个表格。
现在，这一切都很好，但我遇到的问题是 Outlook/Word 渲染引擎坚持在文本框内的表格下方添加一个空白行。因此，虽然 Outlook 会在内容的一侧重复背景图像，但它也会在外部表格的整个宽度处添加一行背景图像。
在 Outlook 2007+ 中测试以下内容，看看我目前有什么：
<table background="http://i.imgur.com/n8Q6f.png" cellpadding="0" cellspacing="0" width="200"> <tr> <td> <!--[if gte mso 9]> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 200px;"> <v:fill type="tile" src="http://i.imgur.com/n8Q6f.png" color="#f6f6f6" /> <v:textbox style="mso-fit-shape-to-text: true;" inset="0,0,0,0"><span style="font-size: 0px;"> <![endif]--> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td width="100"></td> <td bgcolor="#ffffff" width="100"> The<br/> background<br/> image<br/> on<br/> the<br/> left<br/> will<br/> stretch<br/> to<br/> the<br/> height<br/> of<br/> this<br/> content. </td> </tr> </table> <!--[if gte mso 9]> </span></v:textbox> </v:rect> <![endif]--> </td> </tr> </table>我尝试了一些解决方案：
- 将空行的字体大小/行高设置为 0（我在上面的示例代码中这样做了，但它呈现为 1px 而不是 0）
- 使用不同的元素代替表格，以避免出现空行。
<p>：不能设置为固定宽度。<div>: 不能有背景色。<span>: 不能呈现为块级元素。希望有人可以分享这个剩余问题的解决方案。 John B.，如果您可以发布您正在编码的实际代码或布局以及背景图片，这也将有助于确定哪些黑客可能有效以及必须考虑哪些限制。
例如，如果背景图片是 1 像素高的重复图片，您可以使用一排 1 像素宽、具有不同背景颜色的表格单元格来代替实际图片。
[1]：http://msdn.microsoft.com/en-us/library/bb264073%28v=VS.85%29.aspx [2]：http://msdn.microsoft.com/en-us/library/bb229596%28v=VS.85%29.aspx
【讨论】：
inset="0,0,0,-20px"。这完全消除了底部的间隙。
我很久以前就不使用 Outlook，但这似乎至少在 gmail 中可以解决问题：
<td width="200" style="background-repeat: repeat-y;" background="http://the-location.com/backgroundImage.jpg"></td>
提示是使用（已弃用的）background 属性来放置图像，而不是在 style 属性内，您可以在其中设置 repeat-y 属性（另请注意，我正在使用属性 @987654327 @ 而不是将其作为 css 属性添加到 style 属性中...但是正如您所提到的，只有在您构建 html 电子邮件之前，您才知道我们在说什么；）
我在时事通讯中这样做过很多次，但我没有收到任何报告说在向 Outlook 用户发送测试时邮件看起来不正确。
【讨论】：
在处理 HTML 电子邮件时，您应该注意各种客户端之间的差异。
This guide 可以提供帮助。例如，在 Outlook 2007/2010 中，不支持后台重复。奇怪的是，它在 2003 版中得到了支持。
【讨论】：
在 Outlook 2007/2010 和 2013 中似乎没有办法实现重复的背景图像。
这里是 JFK 测试的预览：http://www.emailonacid.com/app/acidtest/viewresult/nWC9hJ5N0BvkZIk4Zvz724rMQm19MUsCJ0shOIFcWgGMh。不幸的是，它也不起作用。
CampaignMonitor 有一个关于不同客户端中的 HTML 和 CSS 支持的非常有用的指南：http://www.campaignmonitor.com/css/
如果您在 Outlook 2007/2010 和 2013 中只需要固定大小的背景图片，VML 对象可能会帮助您：https://www.campaignmonitor.com/forums/viewtopic.php?pid=14197
【讨论】：
大声笑，愚蠢的开发人员。在大多数主要电子邮件客户端中，只需创建一个复杂的表格即可轻松实现没有内容的垂直重复背景。
例如，在 John 的例子中，他可以轻松地在主要内容“td”旁边创建“td width="1" bgcolor="#XXXXXX" /td”组合来保存他的内容。我强烈建议在您的主要内容 td 中嵌套一个表格，以便您可以流畅地控制其中的填充和高度。
这种编码风格是在电子邮件领域实现垂直流动布局的最佳方式，我将继续为您提供帮助。缩进有点偏离，但这是一个糟糕的代码编辑情况，我的结束表没有出现。不管怎样，你明白了。
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="1" bgcolor="#e4e4e4"></td>
<td width="1" bgcolor="#e1e1e1"></td>
<td width="1" bgcolor="#dadada"></td>
<td width="1" bgcolor="#cfcfcf"></td>
<td width="1" bgcolor="#c6c6c6"></td>
<td valign="top" align="center" width="200">
<!-- Main Content Cell -->
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" align="center" height="200">
<!-- I can be whatever height and still not break this cell's makeshift background -->
</td>
</tr>
</table>
<!-- End Main Content Cell -->
</td>
<td width="1" bgcolor="#c6c6c6"></td>
<td width="1" bgcolor="#cfcfcf"></td>
<td width="1" bgcolor="#dadada"></td>
<td width="1" bgcolor="#e1e1e1"></td>
<td width="1" bgcolor="#e4e4e4"></td>
</tr>
另外，这是事后的想法，但我曾将这种语言用于 Outlook，称为 VML。它非常适合背景，但它不会做重复的东西。你可以在这里查看一个很好的介绍：http://blog.oxagile.com/2010/04/23/background-images-for-outlook-2007-and-outlook-2010-beta/
【讨论】：