为Gmail设置HTML电子邮件的样式
为Gmail设置HTML电子邮件的样式
提问于 2012-01-30 03:45:08
我正在生成一个使用内部样式表的html电子邮件。
<!doctype html>
<html>
<head>
<style type="text/css">
h2.foo {color: red}
</style>
</head>
<body>
<h2 class="foo">Email content here</foo>
</body>
</html>在Gmail中查看时，内部样式表中的所有样式似乎都被忽略了。Gmail似乎忽略了除内联规则之外的所有样式。
<h2 style="color: red">Email content here</foo>当使用Gmail查看HTML电子邮件时，这是我唯一的选择吗？
回答 7
Stack Overflow用户
发布于 2012-02-04 05:43:40
对任何东西都使用内联样式。此站点将把您的类转换为内联样式：http://premailer.dialect.ca/
Stack Overflow用户
发布于 2014-05-22 20:43:47
Gmail开始对head区域中的样式标签提供基本支持。到目前为止还没有找到官方的东西，但你可以很容易地自己尝试一下。
它似乎忽略了class和id选择器，但基本的元素选择器可以工作。
<!doctype html>
<html>
<head>
<style type="text/css">
p{font-family:Tahoma,sans-serif;font-size:12px;margin:0}
</style>
</head>
<body>
<p>Email content here</p>
</body>
</html>它将在自己的标题区域中创建一个样式标记，该标记限制在包含邮件正文的div中
<style>div.m14623dcb877eef15 p{font-family:Tahoma,sans-serif;font-size:12px;margin:0}</style>Stack Overflow用户
发布于 2017-12-22 01:31:59
我同意每个支持类和内联风格的人的观点。你现在可能已经知道了这一点，但是如果你的样式表中有一个错误，Gmail会忽略它。
你可能认为你的CSS是完美的，因为你经常这样做，为什么我的CSS会有错误呢？通过CSS Validator (例如http://www.css-validator.org/)运行它，看看会发生什么。我是在遇到一些Gmail显示问题后才这么做的，令我惊讶的是，几个Microsoft Outlook特定的样式声明显示为错误。
这对我来说很有意义，所以我从样式表中删除了它们，并将它们放入only for Microsoft代码块中，如下所示：
<!--[if mso]>
<style type="text/css">
body, table, td, .mobile-text {
font-family: Arial, sans-serif !important;
}
</style>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->这只是一个简单的例子，但是，谁知道呢，它可能会在某个时候派上用场。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9056172
复制相关文章
相似问题