2012 html 电子邮件 - 表格、div 和 @media答案

【问题标题】：2012 html emails - tables, divs and @media2012 html 电子邮件 - 表格、div 和 @media
【发布时间】：2012-11-20 00:51:17
【问题描述】：

html 电子邮件的当前趋势是什么？

查看响应式设计 html 电子邮件，我发现了关于活动监视器的 this 文章。

它似乎在样式块中混合了 css @media 查询和其他 css，而不是内联样式，以及老式的表格布局。

当然，如果电子邮件客户端能够处理 css，它就知道如何处理 div？还是该表只是那些仍然不能的人的后备？而媒体查询和阻止 css 对那些这样做的人来说是额外的甜蜜吗？

我意识到电子邮件客户端的变化不如网络浏览器那么快，但表格仍然是最好的前进方式吗？

我确信这个问题之前已经被问过很多次了，但我正在寻找现代趋势。

也许这应该是另一个问题，但我也注意到这篇文章混合了 element.class 和 element[class="classname"] 声明 - 最后一个我只与 input[type="value" 一起使用过] 前。为什么类的方括号？

【问题讨论】：

表本身是一个保存后备，如果确实 div 不工作。表格是标准元素，在每个浏览器中响应不同，div 可以改变（考虑边距/填充 - 等）选择表格更安全，我认为，虽然不要引用我的话。关于你的方括号问题，这取决于。它可以用作验证，但是，我看不出它在这里是如何变化的。此外，它是一种指定某事的合法方式，特别是某事，这意味着 css 仅适用于该元素。

【解决方案1】：

最近我的公司正在改变他们的电子邮件布局。首先，我们决定测试不同电子邮件客户端与最新 html/css 标准的兼容性。然而，在编码过程中，我们遇到了许多正确渲染的问题，这迫使我们转向基于table的布局。

我们还使用@media-queries 和更复杂的样式让客户能够理解它们，但不幸的是，如果你想支持流行的邮件客户端，tables 仍然是要走的路。很遗憾，有这么多企业客户使用旧版 Outlook 或类似的。

工作完成后，我们正在使用Campaign Monitor Tester 测试我们的布局，但这还不够，我们不得不手动测试许多客户端。

总结：如果我现在要编写电子邮件布局，我会使用表格和内联样式。

编辑：括号符号是正确的，但我不明白这一点。此外，在此示例中，它将仅匹配具有一个名为 classname 的类的元素。它不会匹配<p class="classname othername">。如果这里没有其他参数可以使用它，我会使用标准点表示法 (.classname)。

【讨论】：

【解决方案2】：

应该注意，您需要内联所有 css 以获得最大的兼容性。 Campaignmonitor 有一个工具可以自动为您内联，因此在阅读他们的建议时请记住这一点。

需要内联 css 的原因是基于 web 的客户端，如 gmail 和（我也认为）yahoo 剥离了样式声明（以及正文标签之外的所有内容）以确保它不会与他们的网页。无法内联媒体查询，因此即使制作响应式电子邮件是当前的趋势，但请注意它们在 gmail 中不起作用。

仍然在表格中工作，因为不同的电子邮件客户端存在不一致，特别是它们如何处理不同的 css 属性。电子邮件“停留在过去”的主要原因之一是 Outlook 使用 MS Word 渲染引擎。 Outlook 仍然是最受欢迎的电子邮件客户端，尤其是 B2B。

希望这些信息对您有所帮助！

【讨论】：