Dón*_*nal 93 html css gmail html-email
我正在生成一个使用内部样式表的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电子邮件样式的唯一选项吗？
小智 62
为所有内容使用内联样式.此站点将您的类转换为内联样式:http://premailer.dialect.ca/
Mat*_*son 16
截至2016年9月30日,此处的答案已过时.目前,Gmail正在支持对该style标记head以及媒体查询的支持.如果Gmail是您唯一关心的问题,那么您可以安全地使用像现代开发人员这样的课程!
作为参考,您可以查看官方的gmail CSS文档.
作为旁注,Gmail是唯一不支持的主要客户端style(参考,无论如何更新).这意味着您几乎可以安全地停止内联样式.一些较为模糊的客户可能仍然需要它们.
fuc*_*777 11
Gmail开始对头部区域中的样式标记提供基本支持.什么都没发现,但你可以自己轻松尝试.
它似乎忽略了类和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>
我同意支持类和内联样式的所有人。您可能现在已经了解了这一点，但是如果样式表中有一个错误，Gmail将忽略它。
您可能会认为您的CSS很完美，因为您经常这样做，为什么我的CSS会出错？通过CSS验证程序（例如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]-->
这只是一个简单的示例，但是，谁知道，它可能会在一段时间内派上用场。