Question

关于在不同的电子邮件客户端上呈现一些HTML，我有两个问题。

首先，td背景跨越Outlook中的重叠文本。我了解要渲染背景图像，我必须创建如下所示的内容：

<tr>
    <td style="padding-bottom: 45px;">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td background="<#= GetHeaderImage() #>" bgcolor="#000001" valign="top" height="300" class="m-bg">
                    <!--[if gte mso 9]>
                    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 752px; height: 300px;">
                        <v:fill type="frame" src="<#= GetHeaderImage() #>" color="#000001" />
                        <v:textbox inset="0,0,0,0">
                    <![endif]-->
                    <div>
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td valign="top" class="h-auto" height="240" style="padding: 30px 45px;">
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td class="img-center" style="padding-bottom: 30px; font-size:0pt; line-height:0pt; text-align:center;">
                                                <a href="#" target="_blank">
                                                    <img src="http://www.clker.com/cliparts/3/m/v/Y/E/V/small-red-apple-hi.png" width="108" height="68"
                                                        border="0" alt="" />
                                                </a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="h1 a-center t-white" style="padding-bottom: 10px; font-family:Arial, sans-serif; font-size:36px; line-height:42px; text-align:center; color:#ffffff;">
                                                <strong>Top Text</strong>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="h2 a-center t-white" style="font-family:Arial, sans-serif; font-size:24px; line-height:30px; text-align:center; color:#ffffff;">Middle Text<br />Bottom Text</td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!--[if gte mso 9]>
                    </v:textbox>
                    </v:rect>
                    <![endif]-->
                </td>
            </tr>
        </table>
    </td>
</tr>

（出于隐私原因，我已将图像和文本替换为某些占位符；此外，使用<＃= GetHeaderImage（）＃>部分，我正在将HTML开发为文本模板，然后在编译时生成文本）

在GMail Desktop中看起来不错（不是移动设备，这是一个问题，因此，如果有人知道我很乐意知道原因，尽管稍后我可能会单独进行研究；请忽略适合的图像尺寸）： Gmail

但是在Outlook中，它看起来偏心！ Outlook

更糟糕的是，在Outlook Web中根本没有图像，但是图像居中！

这使我得出一些结论：

1）对于GMail Desktop /常规Outlook中的td背景图像的文本/图像覆盖，我的HTML看上去大致正确。但是，文本在Outlook中偏离中心。为什么？我确实注意到，如果我从Outlook导出.html并进行检查，则vml的宽度和高度似乎与我设置的不符。有特定原因吗？

2）为什么附件链接在Outlook中的GMail或VML中的td背景中不起作用，而URL在所有平台上都起作用？有没有办法使附件链接起作用？

谢谢您的帮助！如果我设法找出问题，我也会回应。

有关Outlook和Outlook Web中的背景的问题

0 个答案: