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

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

html css outlook

Html Outlook中的单元格背景图像行为,html,css,outlook,html-email,vml,Html,Css,Outlook,Html Email,Vml,我对Outlook（惊喜）有问题，并且表格单元格中有背景图像。现在的问题是，我可以让它在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

我对Outlook（惊喜）有问题，并且表格单元格中有背景图像。现在的问题是，我可以让它在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>


同侧眼底



这里有一些文本

这里有一个分页符

这将产生这样的结果：

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

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

现在我的理解是，这个桌面客户端可能以更高的DPI/分辨率进行渲染，因此，为什么将宽度加倍可以得到正确的结果，而实际宽度可以得到半个单元格

我的问题是，是否存在一种“一轮工作/黑客攻击”，允许我在该客户机中以双倍宽度显示，而让其他人忽略此规则

如果有任何帮助，我将不胜感激，因为我在任何地方都找不到任何信息，提前谢谢。

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

这是非常清楚的原因，它打破了以及如何应对它，所以我强烈建议检查它，以充分了解这个问题

但是，如果您很忙，只需要快速修复代码，则需要在模板的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]> <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">

可能是相关的：outlook中的元素宽度通常存在问题，解决方法是省略引号并编写类似于width=640 的内容，而不是width=“640” 。不幸的是，尽管这看起来很相似，但我可以在outlook的所有其他版本中使用单元格和图像。只有在Windows 10 Outlook客户端中，它似乎会中断，并且可能与屏幕的DPI有关。如果尝试添加Outlook条件语句，则可能能够使其正常工作。一个代码块适用于outlook 2010以下版本，一个适用于outlook 2010，另一个适用于其他电子邮件客户端。如果您想知道如何实现此目的的示例，请告诉我。是的，请Syfer，我不知道您可以指定代码引用的Outlook版本！