在 Gmail (Internet Explorer) 和 Yahoo (Windows) 中的 <td> 上去除内联 CSS答案

【问题标题】：Inline CSS being stripped on <td> in Gmail (Internet Explorer) and Yahoo (Windows)在 Gmail (Internet Explorer) 和 Yahoo (Windows) 中的 <td> 上去除内联 CSS
【发布时间】：2013-12-05 20:43:36
【问题描述】：

我正在构建 HMTL 电子邮件，并使用嵌套表格来布局电子邮件。要更改文本，我将样式直接应用于标签，这在大多数情况下都适用。我注意到，尽管在某些重度嵌套的表格（大于 5）上，Internet Explorer 中的 Gmail 和各种浏览器（PC 上）的 Yahoo 上的样式已被完全删除。以下是我的代码：

（此代码大约 5 个表深）

        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td style="padding-bottom:10px;font-family:'Century Gothic',Arial, Helvetica, sans-serif; font-size:26px; color:#202020;">The Latest</td>
          </tr>
        </table>

以前有没有人遇到过这种情况，或者知道他们为什么会剥夺这种风格？不仅是文本样式，而且这些标签上的填充也被删除了。

【问题讨论】：

标签： html css email html-email

【解决方案1】：

我自己从来没有遇到过这个问题，但是已知嵌套表太深会出现问题。我敢打赌，有一种更精确的方式来安排您的电子邮件以避免该问题。必要时不要害怕使用colspans and rowspans。如果您愿意，请发布您的代码。

【讨论】：

明白了，谢谢。我对 colspans 很满意，但我的印象是 rowspans 是阴暗的生意。我会修补的。谢谢一堆。此外，我无法发布我的代码，因为我正在为客户构建此代码，此时我无法公开它。
Rowspans 对我来说总是很好用。我见过的唯一问题是 Outlook 分页符，但这是一个普遍问题。
作为参考，这里是 an example 使用 colspans 优化电子邮件

【解决方案2】：

我想我可能知道为什么会这样。当使用带引号的字体系列时，我已经看到了一些问题，这会导致内联 CSS 失效。如果将字体系列移动到内联样式的末尾，它可能会起作用。见下文。

<table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td style="padding-bottom:10px; font-size:26px; color:#202020; font-family:'Century Gothic',Arial, Helvetica, sans-serif;">The Latest</td>
      </tr>
    </table>

【讨论】：

我听说这会导致 Outlook 默认为 Times New Roman - 所以您发现它也会影响其他客户端，在字体声明之外的范围内？更多信息会很棒...
这很有帮助。感谢您花时间解释。

【解决方案3】：

如果这对任何人都有用：我遇到了一个特定的<td> 的问题，它正在剥离所有内联 CSS。检查后，我发现我声明了一个不正确的属性，如下所示：

padding-bottom;

删除不正确的属性解决了问题。

在我看来，Gmail 会以某种方式验证每个元素的 css，如果发现错误则将其全部删除。

【讨论】：

【解决方案4】：

这不是一个直接的答案，所以我很抱歉，但你能不能用 CSS 代替 HTML 表格？您将能够达到我认为的相同结果吗？

【讨论】：

不。这会有什么不同？
在评论中有很多解释。但举个例子：Outlook 2007 使用 Microsoft Word 作为其 html 呈现引擎。

【解决方案5】：

我刚刚测试了一个适用于 Gmail 的 html 电子邮件。一般来说，我了解到，当您声明 font-family 时，Gmail 倾向于去掉整个内联样式属性，这种行为有时会发生在以下情况：

1) 当您使用' 或" 声明自定义字体时，es: 

2) 如果不在 ; 、 , 和 : 字符之间放置空格，则在 font-family 声明中。

3) 每次您在同一个 <td> 中声明 2 个  和 font-family 时，Gmail 都会剥离第二个  规则

但我不知道一般规则是什么，所以我的解决方案是：总是在单独的标签中声明字体系列，至少这样你就不会丢失所有的样式。

示例：

<span style="color:#8d8c87;display:block;font-size:12px;line-height:120%;text-align:center">
    <span style="font-family:'Titillium Web',Arial,sans-serif;">text</span>
</span>

【讨论】：

感谢@pastorello，但您的代码在我的测试中呈现相同。不过方法很有趣。
gmail 对这些行为很奇怪，在我的具体情况下，我有这样的结构：<td></td>，2 个span 标签具有相同的内联样式（由内联工具生成，100% 准确率）。 Gmail 决定保留第一个  的所有样式，并删除第二个  的所有内联样式。现在我正在编辑我的完整答案