为什么在 Firefox、Internet Explorer、Chrome Web 浏览器中我的电子邮件模板显示正确对齐，但在 Microsoft Outlook 电子邮件阅读器中却出现问题？

Question

我有一个用于发送电子邮件的模板，该模板是用 css 纯手工编写的，然后我在 Firefox/InternetExplorer/Chrome 浏览器中进行了测试。但是当我将该电子邮件发送给我老板的电脑时，因为他始终是 Microsoft Outlook 用户。

他总是让对齐被破坏，文本被破坏，所有问题都开始了。我的问题是你到底如何写作？没有一个网络浏览器显示我的模板错误。

我搜索了很多，但大多数答案都没有对此进行深入和正确的回答。我非常感谢一些专家对此的意见。

谢谢

Answer 1

Outlook 使用旧版本的 Trident（CSS 渲染引擎）。根据您老板使用的 Outlook 类型，情况可能会变得更糟。 Outlook 2010 实际上恢复到了旧版本的 Trident，因为微软在欧盟的反垄断诉讼中败诉，因此无论 2010 年之前的版本实际上都呈现得更好，但它们都相当低于标准。
你会想要停止使用现代 html/css 进行开发，而转向老式的表格布局。我知道，这很恶心，但你必须为电子邮件这样做。
最好的测试是原生的，但如果您无法访问这两个版本（不是很多），您应该查看 EmailOnAcid.com，他们提供了大量可以测试的电子邮件客户端。
如果您需要任何其他服务，constantcontact.com、mailchimp.com 和 Campaignmonitor.com 都提供的不仅仅是测试服务。

Answer 2

Outlook 2007 是个坏人。任何新的或旧的都更好。在 Outlook 2007 中，许多 CSS 命令不起作用。

请参阅此页面：http://www.email-standards.org/ 了解详细信息。

不过，尝试将您的电子邮件发送到 Gmail.com，看看它在 Gmail 网络界面中的显示方式 - Gmail 的限制非常严格，根据经验，如果它显示得很好，那么在其他界面中也应该看起来不错。网络客户端也是如此。

关于 HTML 电子邮件的一些建议：

• Outlook
  • 最好为 Outlook 提供宽度，否则 CSS 可能会崩溃。
  • Outlook 不支持
    /

    、float 的 padding > 以及其他各种事情。

• 邮箱
  • 对于 Gmail，您应该优先使用内联 CSS，而不是定义类。
  • Gmail 实际上会解析您提供的 CSS，例如，将 height 更改为 min-height，因此使用高度是没有用的。然而，浏览器不尊重的min-height，因此
    内的内部

    td>s 可用于确保应用最小高度。

  • 出于安全原因，Gmail 会去除背景图像，并且通常在所有电子邮件客户端中都会根据用户请求显示图像。因此，用
    包裹图片，并设置外层div的背景色和颜色，并为图片提供alt（替代文本） （另请注意，带有空 src 的图像在浏览器渲染时不会保留宽度和高度）。