为什么在火狐，ie, chrome浏览器中我的电子邮件模板显示正确对齐，但在微软outlook电子邮件阅读器中它被破坏

Question

我有一个模板，我用来发送纯手写的电子邮件与css，然后我在Firefox/InternetExplorer/Chrome浏览器测试。但当我把这封邮件发给我老板的电脑时，因为他一直是微软outlook的用户。

他总是把对齐破坏，文本破坏所有问题开始。我的问题是，你到底是怎么写的?没有浏览器显示我的模板错误。

我搜索了很多，但大多数答案都没有深入和正确地回答这个问题。我真的很感谢一些专家在这方面的意见。

谢谢

Answer 1

outlook使用的是旧版本的CSS渲染引擎Trident。这取决于你的老板用的是什么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的<div> s/<p> s, float和各种其他的东西。
• Gmail
  • 对于Gmail，你应该使用内联CSS优先于定义类。Gmail实际上解析了你提供的 CSS，例如，将height更改为min-height，因此使用高度是无用的。但是，<td>的min-height不受浏览器的尊重，因此可以使用<td> s中的<div> s来确保min-height被应用。
  • Gmail剥离背景图像，通常在所有电子邮件客户端图像显示在用户请求出于安全原因。因此，使用<div>包裹图像，并设置背景色和外部div的颜色，并为图像提供alt(替代文本)(还要注意，使用空src的图像在浏览器渲染时不保留宽度和高度)。