Outlook 中的单元格背景图像行为

Question

我在使用 Outlook 时遇到问题（惊讶）并且 table 单元格中有背景图像。现在的问题是我可以让它在 99% 的 Outlook 版本中工作，但是 Windows 10.

上的 2016 运行桌面版本除外

这是区块的代码：

<table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" class="w-full" style="vertical-align:top; width: 640px;" width="640">
<tr>
    <td class="w-full" background="http://via.placeholder.com/640x320" bgcolor="#7bceeb" width="640" valign="top">
            <!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:1280px;">
<v:fill type="tile" src="http://via.placeholder.com/640x320" color="#ffffff" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
            <div>
                <table align="" border="0" cellpadding="0" cellspacing="0" class="w-full" style="vertical-align:top;" width="640">
                    <tr>
                        <td valign="top">
                            <table border="0" cellpadding="0" cellspacing="0" class="w-full" width="640">
                                <tr>
                                    <td height="35" style="text-align: center;"> </td>
                                </tr>
                                <tr>
                                    <td align="center" style="color:#FFFFFF; font-size:24px;">
                                        <div style="font-family:'Century Gothic', Helvetica, Arial, sans-serif; color: #ffffff; text-transform: uppercase;"> <font face="'Century Gothic', Helvetica, Arial, sans-serif"><span style="font-size:44px;">Lorem Ipsum</span><br>
                                      <br>
                                      <span style="font-size:24px;">SOME TEXT HERE<br>
                                      with a page break here</span></font>
                                            <br>
                                            <br> &nbsp;</div>
                                        <table align="center" border="0" cellpadding="0" cellspacing="0">
                                            <tr>
                                                <td align="center" style=" font-family:'Century Gothic', Helvetica, Arial, sans-serif; font-size:14px; color:#ffffff; text-transform: uppercase; font-weight: bold;"> <a href="#" style="color:#ffffff; text-decoration:none; padding:14px 30px; display:inline-block; border:solid 1px #ffffff;" target="_blank">CTA Text</a></td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                                <tr>
                                    <td height="35"> </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </div>
            <!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
        </td>
</tr>
</table>

这将产生以下结果： 2016 Desktop

但是，它杀死了其他版本： All other versions

如果我将 VML 宽度从 1280px 减少到它应该的值 (640px)，它会修复所有其他版本，但是，在桌面客户端中只给我一半的图像（基本上是相反的）。

现在我的理解是这个桌面客户端可能会以更高的速度呈现 DPI/resolution，因此为什么加倍宽度会得到正确的结果而实际宽度会给我半个单元格。

我的问题是，是否有 work-a-round/hack 允许我在该客户端中以双倍宽度显示并让其他人忽略此规则？

任何帮助将不胜感激，因为我无法在任何地方找到任何信息，提前致谢。

Answer 1

经过一周的搜寻，我发现这篇文章解决了我遇到的问题：

Solving DPI scaling issues with HTML email in Outlook

很清楚它为什么会崩溃以及如何解决它，所以我强烈建议您检查它以完全理解这个问题。

但是，如果您赶时间并且只想要快速修复的代码，则需要将以下代码插入到 模板的 HTML 标记中:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

这会告诉 Outlook 会发生什么然后，您需要将此代码插入模板的 HEAD 部分 ，就在 关闭之前：

<Head>
<!--[if gte mso 9]>
    <xml>
        <o:OfficeDocumentSettings>
        <o:AllowPNG/>
        <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
    </xml>
<![endif]-->
</Head>

最后，和以前一样（参见原始问题），您需要准确地告诉单元格它需要做什么，类似于：

<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;">
<v:fill type="tile" src="http://via.placeholder.com/640x320" color="#ffffff" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">

显然，根据需要调整您自己的电子邮件，但这对我有用。我希望这个答案对其他人有所帮助，因为当它归结为具有更高分辨率显示器的较新机器上的 DPI 缩放时，它对我有所帮助！

此解决方案完全归功于 "James"。

Outlook 中的单元格背景图像行为

Cell background image behaviour in Outlook

html

css

outlook

vml

html-email