电子邮件客户端忽略内部样式表答案

【问题标题】：Email clients ignoring internal style sheet电子邮件客户端忽略内部样式表
【发布时间】：2014-09-26 03:57:54
【问题描述】：

正常 Web 开发中的最佳实践要求将样式放在样式标签之间或加载样式表；但是，我发现一些电子邮件客户端会忽略任何样式标签，只执行内联样式 (www.campaignmonitor.com)。我可以解决这个问题，但我不确定 CSS 是否支持内联媒体查询。我希望我的电子邮件在桌面上显示有所不同。是否支持类似的东西？：

<div id="myDiv" style="@media screen and (max-width:480px;){ color:black; }"></div>

【问题讨论】：

你可以在正文中使用<style>标签，而不是在头部（不要有头部）
否；那是完全不可能的。对不起。
这是一个很好的资源HTML email templates。

标签： css html-email

【解决方案1】：

HTML 电子邮件是完全不同的野兽。您需要像 1999 年那样对它们进行编码。使用非常有限的一组标签并确保所有或您的样式都是内联的。使用表格进行布局。

要使用媒体查询，您需要同时执行这两项操作。

我建议首先使用所有内联样式创建您的电子邮件。然后，当您对它感到满意时，您可以添加对移动设备的支持。

要添加对移动设备的支持，请将媒体查询添加到 head 标签并使用 !important 覆盖任何内联样式。

这是一个例子： Optimizing for mobile email

这是一个有用的图表，详细说明了电子邮件客户端的 css 支持。 http://www.campaignmonitor.com/css/

【讨论】：

谢谢。我正在遵循其中一些技巧，例如使用表格，但我的样式不是内联的。我正在使用 Litmus，看起来这些浏览器中的大多数都读取了样式表并根据媒体查询正确应用了正确的值，但是如果它们必须是内联样式，并且我对响应电子邮件设计不走运？
你应该能够做到这两点。确保您拥有 gmail 和 Outlook 等主要客户端的内联样式，但使用 !important 将媒体查询添加到头部以获得移动支持。
完美。我现在要试试这个。
请注意，由于媒体查询无法内联，因此它们在 gmail 中不起作用。

【解决方案2】：

我认为它们不会像那样内联工作，您可能必须将样式表嵌入 HTML 电子邮件模板本身（例如 <style>@media {...}</style>）。

即使这看起来是一件非常狡猾的事情。 HTML 电子邮件令人头疼，因为标准和 CSS 支持落后了大约十年，流行的电子邮件客户端在支持哪些属性和样式类型方面存在巨大差异。

一般来说，保持简单并使用带有所有内联 CSS 的老式表格布局是可行的方法。 Campaign Monitor 有一个great chart of support for various CSS properties in major email clients and devices。

【讨论】：

谢谢！到目前为止，Campaign Monitor 提供了巨大的帮助。具有良好 CSS 和 HTML 支持的客户端在桌面和移动设备上看起来非常棒，但无法正确呈现的大客户端是 Gmail 和 Outlook，因此在此之前它是一个损坏的产品。
Campaign Monitor 的一个注释是，他们有一个工具可以在发送之前自动内联他们的 css。当您阅读任何建议等时，请记住这一点...如果您想要一个不使用 CM 的内联工具，请尝试premailer

【解决方案3】：

解决电子邮件客户端中 HTML 无法正确呈现问题的常见解决方法是尽最大努力，并在顶部有一个显眼的链接，上面写着：“电子邮件无法正确显示？在浏览器中查看。 "

Ray Kurzweil 的每周时事通讯爆炸就是这样做的，而且它的格式非常好，做得很好，我总是阅读它。（这是内容和演示的完美结合）。

【讨论】：

所有电子邮件都应在浏览器选项中查看。这绝对是 html 电子邮件的最佳实践。