Chrome 中的文本阴影 - Gmail 失败？答案

【问题标题】：Text-shadow in Chrome - Gmail fails?Chrome 中的文本阴影 - Gmail 失败？
【发布时间】：2011-04-13 18:38:55
【问题描述】：

所以，我有一个网页使用 CSS “text-shadow” 来实现效果。

如果我在 Chrome 中浏览网页，文本阴影效果与我预期的一样。

但如果我向我的 gmail 帐户发送 HTML 电子邮件并查看 Gmail 中的页面（使用相同的浏览器），文本阴影效果就消失了。

查看链接的图片。左边部分是浏览页面时的部分，右边部分是在gmail中发送给自己时的相同html内容。如您所见，阴影效果消失了。

图片在这里：Picture

这是使用的 CSS：

    <style type="text/css">
        p { padding: 0; margin: 0; }
        h1, h2, h3, p, li { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
        td { vertical-align:top;}
        ul, ol { margin: 0; padding: 0;}
        .title, .date {
            text-shadow: #8aa3c6 0px 1px 0px;
        }

        .textshadow {
            text-shadow: #ffffff 0px 1px 0px;
        }
        .trxtshadow-2 {
            text-shadow: #768296 0px -1px 0px;
        }
    </style>

对我来说听起来很奇怪。有什么想法吗？

【问题讨论】：

GMail 可能会去掉一些效果？您是否尝试过查看电子邮件的 HTML 源代码？

标签： google-chrome css gmail

【解决方案1】：

GMail 不支持电子邮件中的<style> 块。您必须在大多数 HTML 邮件中使用内联样式以获得最大的兼容性。是的，很丑。但这是当前的现实。

请参阅以下内容：

【讨论】：

谢谢。很有趣，也很烦人。我会调查的。

【解决方案2】：

正如 Joshua 所说，gmail 会删除 <style> 块，但它也会从内联块中删除一些样式，包括我刚刚发现的 text-shadow 和 border-radius。

如果您在 html 电子邮件中的元素上设置了这些样式，请在 gmail 中启动 firebug 并查看它们 - 它们已经消失了。但是，如果您在电子邮件中“显示原创”，您会看到样式就在那里。

我想他们这样做是为了在浏览器中看起来一致，但这是一种奇怪的行为，而且似乎 gmail 需要做很多工作。

【讨论】：