Question

我正在构建HMTL电子邮件，我使用嵌套表来布局电子邮件。要更改文本，我将样式直接应用于＆lt; td＆gt;标签，这在大多数情况下都适用。我注意到，虽然在一些重度嵌套的表格（大于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>

有没有人遇到过这个问题，或者知道为什么他们可能会剥夺这种风格？它不仅是文本样式，而且在这些＆lt; td＆gt;标签。

Answer 1

我自己从来没有遇到过这个问题，但是已经知道嵌套表的问题太深了。我愿意打赌，有一种更精确的方式来布局你的电子邮件，以避免这个问题。不要害怕在必要时使用colspans and rowspans。如果你愿意，可以发布你的代码。

Answer 2

我想我可能知道为什么会这样。我在使用带引号的font-family抛出内联CSS时遇到了问题。如果将font-family移动到内联样式的末尾，它可能会起作用。见下文。

<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>

Answer 3

万一这对任何人都有用：我遇到了一个特定的<td>，该问题使所有内联CSS都被剥离了。检查后，我发现声明了错误的属性，如下所示：

padding-bottom;

删除该不正确的属性即可解决此问题。

在我看来，Gmail会以某种方式验证每个元素的CSS，并在发现错误时将其全部剥离。

Answer 4

不是直接回答，所以我道歉，但你能不能使用CSS而不是HTML表格？您将能够达到我想的相同结果吗？

Answer 5

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

1）当您使用'或"声明自定义字体时，es：<span class="small-text" style="font-family:'Titillium Web',Arial,sans-serif;"></span>

2）如果不在;声明中在,，:和font-family个字符之间添加空格。

3）每次您使用同一<span>中的font-family声明2 <td>时，Gmail都会删除第二个<span>规则

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

示例：

<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>

内联CSS在Gmail（Internet Explorer）和Yahoo（Windows）中被剥离

5 个答案: