Gmail 移除内联 CSS答案

【问题标题】：Gmail removes in-line CSSGmail 移除内联 CSS
【发布时间】：2015-11-11 13:27:55
【问题描述】：

在我创建的 HTML 电子邮件中，我的图像之间的间隙一直存在问题。我从在线指南中了解到，在 img 标签上使用 display: block 可以轻松解决问题。但是似乎 gmail 现在删除了所有内联 CSS。

我使用 Chrome 浏览器。我还在 Firefox、Opera、Safari 和 IE 中对此进行了测试。他们的问题都是一样的。

这也会影响 td 标签上的 line-height 问题。已知一些差距是由行高问题引起的，以前的内联 CSS 是一种解决方案。但是，现在我无法编写内联或嵌入的 css 来覆盖 gmail 应用的内容。

有人知道当前的变通方法或解决方案吗？

例如，以下内容不适用于使用 Chrome 的 gmail - CSS 已被 gmail 删除：

<table width="700" cellpadding="0" cellspacing="0" border="0" height="592">
    <tbody style="line-height:0px;padding:0;margin:0;" width="700" height="592">
    <tr width="700" height="296">
        <td style="line-height:0px;" width="441" height="296">
            <a href="[the url]" target="_blank" width="441" height="296">
                <img src="[the url]" style="display:block;border:0;" width="441" alt="[the alt text]" height="296"/>
            </a>
        </td>
        <td style="line-height:0px;" width="39" height="296">
            <img src="[the url]" style="display:block;border:0;" width="39" height="296"/>
        </td>
        <td style="line-height:0px;" width="220" height="296">
            <a href="[the url]" target="_blank" width="220" height="296">
                <img src="[the url]" style="display:block;border:0;" width="220" alt="[the alt text]" height="296"/>
            </a>
        </td>
    </tr>
    <tr style="line-height:0px;" width="700" height="296">
        <td style="line-height: 0px;" width="441" height="296">
            <a href="[the url]" target="_blank" width="441" height="296">
                <img src="[the url]" style="display:block;border:0;" width="441" alt="[the alt text]" height="296"/>
            </a>
        </td>
        <td style="line-height:0px;" width="39" height="296">
            <img src="[the url]" style="display:block;border:0;" width="39" height="296"/>
        </td>
        <td style="line-height:0px;" width="220" height="296">
            <a href="[the url]" target="_blank" height="296">
                <img src="[the url]" style="display:block;border:0;" width="220" alt="[the alt text]" height="296">
            </a>
        </td>
    </tr>
    </tbody>
</table>

PS - 我知道一些标签不需要这些属性 - 我添加它们是为了测试目的是详尽的并确保尽可能多地声明。

【问题讨论】：

您是从哪个客户发送测试邮件的？
@afelixj 是的，对不起，应该说。我使用 Chrome。
@afelixj 我也在 Safari、Opera、Firefox 和 IE 中测试过这个。问题都是一样的。
不是浏览器..你从哪里发送邮件到你的 gmail ？
@afelixj 我们的测试应用程序向我们发送了一封电子邮件，我们使用 Microsoft Outlook 2007 SP3 打开并转发（到我们的 gmail 帐户）

标签： html css email gmail

【解决方案1】：

测试应用程序或 Outlook 可能正在修剪内联样式。

请尝试使用align:left 而不是display:block。

【讨论】：

你是对的 - 我们发现当从 Outlook 转发电子邮件时，它使用的渲染引擎（Microsoft Word ！）与内联样式混淆。当电子邮件直接发送到基于 Web 的电子邮件客户端时，一切正常。