Outlook中的HTML电子邮件背景破坏布局 - 使用vml方法

Question

目前使用http://backgrounds.cm方法生成后台电子邮件。不使用代码时，电子邮件在大多数测试中看起来都是正确的。添加背景图像后，Outlook 2013将显示它，但所有表格格式都会扩展到100％。不确定我是否错误地实现了它。

目前将背景应用于包含多个单元格的最顶层表格，而不是整个主体。

我在这里贴了代码：http://pastebin.com/dX8zEZDV

Answer 1

我做了几件事来解决它：

• 将您的文档类型从strict更改为transitional。
• 删除了重复的元标记。
• 关闭所有未关闭标记（img和br标记）。
• 删除了您的外部两个包含表格#container_table和#container_wrapper）。
• 在#container_table，已删除min-width，添加了margin:0 auto和align="center"，因此表格居中。
• 在VML代码部分中，将mso-width-percent:1000替换为width:850px。
• 更新了关闭VML标记以更正嵌套顺序（过早关闭）。

可选：

• 在VML代码部分，更改颜色以更好地匹配您的背景（＃292929）。

我发现VML背景图片和内联后备不起作用的唯一实例是我在Android上使用Gmail应用查看我的Outlook电子邮件。但是，当我在同一个应用程序中查看我的name@gmail.com电子邮件时，没关系。因此，如果背景图片未加载，bgcolor将显示，以便您的用户仍然可以看到您的白色文字。

注意： 永远记得验证您的代码。即使存在一些无法解决的错误（例如background中的td属性也无法验证），您可以验证所有标记（减去任何VML代码）是否嵌套/关闭正确地，以及找到任何可能从Photoshop或Word复制到代码中的偶然特殊字符。

更新了jsfiddle的来源：link

Answer 2

如果表格式扩展为100％，那是因为您将“表格单元格宽度”设置为“完整电子邮件宽度”。最好在固定宽度和高度表格单元格上使用VML背景图像。

backgrounds.cm的理想设置是“单个表格单元格”并设置为width和height。否则，结果可能与非Outlook客户端看起来不同（如果事先与利益相关方达成一致，有时它仍然可以。）