Outlook

时间:2017-09-14 12:21:52

标签: html css outlook html-email vml

我遇到Outlook(惊喜)问题并在表格单元格中有背景图像。 现在的问题是我可以在99%的Outlook版本中使用它,但2016年的桌面版在Windows 10上运行。

以下是块的代码:

<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 /分辨率渲染,因此为什么加倍宽度会给我正确的结果,实际的宽度给我半个单元格。

我的问题是,是否有一个工作轮/黑客允许我在该客户端以双倍宽度显示并让其他人忽略此规则?

任何帮助都会受到赞赏,因为我无法在任何地方找到任何信息,提前谢谢。

1 个答案:

答案 0 :(得分:0)

经过一周的狩猎,我遇到了这篇文章,解决了我遇到的问题:

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缩放!

此解决方案完全归功于“詹姆斯”。