为什么在Firefox，Internet Explorer，Chrome网页浏览器中我的电子邮件模板显示正确对齐，但在Microsoft Outlook电子邮件阅读器中它被破坏了？

Question

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

他总是把对齐打破，文本打破了所有问题的开始。我的问题是你怎么写的呢？没有网页浏览器显示我的模板错误。

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

由于

Answer 1

outlook使用旧版本的Trident，CSS渲染引擎。根据你的老板所处的Outlook，它会变得越糟糕。由于微软在欧盟失去了反垄断案，因此Outlook 2010实际上还原为旧版Trident，因此无论2010年之前的版本实际上是什么样的渲染效果都不错，但是它们都非常低于@ best。 你想要用现代的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提供width，否则CSS可能会崩溃。
  • Outlook不支持padding s / <div>，<p>以及其他各种内容的float。
• 的Gmail
  • 对于Gmail，您应优先使用内联CSS 来定义类。
  • Gmail实际上解析您提供的CSS，例如，将height更改为min-height，因此使用高度是无用的。但是，min-height的{​​{1}}不受浏览器的尊重，因此<td>内的<div>内部<td>可用于确保应用最小高度。
  • Gmail会删除背景图片，通常在所有电子邮件客户端中，出于安全原因，图片会根据用户请求显示 。因此，使用<div>包装图像并设置此外部div的背景颜色和颜色，并为图像提供alt（替代文字）（另请注意空白src的图像浏览器渲染时不保留宽度和高度。