在Outlook 2007/2010/2013和Gmail中重复背景图像

Question

我有一个<td>动态高度但固定宽度的HTML电子邮件.

如何将(垂直)重复背景图像添加到在Outlook 2007,2010,2013和Gmail中工作的此单元格？

该单元格中没有任何内容,因为它"仅仅"用于视觉目的.但它紧挨着我的内容单元格,因此需要在高度上保持动态.

Answer 1

2013年8月更新:我怀疑这仍然对约翰有用.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">&nbsp;</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">&nbsp;</o:p></p>

就在文本框结束之前,我已经在之前评论中提到的Microsoft Office TechCenter主题中对此进行了解释.

我的原始答案:

我已经能够几乎破解这个,但并不完全.所以我在这里张贴这个,希望有人可以在此基础上发布并发布一个完全可行的解决方案.

我很确定你无法获得背景图像来实际填充表格单元格或其他未定义高度的区域.但是,您可以在表格周围使用[VML TextBox] [1]和[VML Fill Element] [2] ,并定义背景图像和后备颜色,可以拉伸到内容的高度.

在此文本框中,您可以放置​​一个双列表,其中一个具有透明背景,另一个具有纯色背景,以模拟您描述的布局.

对于非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>

我尝试了一些解决方案:

• 将空行的font-size/line-height设置为0(我在上面的示例代码中执行了此操作,但它呈现为1px而不是0)
• 使用不同的元素而不是表格,以避免空白行.
  • <p>:不能设置为固定宽度.
  • <div>:不能有背景颜色.
  • <span>:无法呈现为块级元素.

希望有人可以分享这个剩余问题的解决方案.约翰B.,如果您可以发布您正在编码的实际代码或布局,以及背景图像,这也将有助于确定哪些黑客可能起作用以及必须考虑哪些限制.

例如,如果背景图像是1px高重复图像,则可以使用一行具有不同背景颜色的1px宽表格单元格代替实际图像.

[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