我正在尝试创建一个具有斑马条纹样式的 Web 邮件模板，该模板在不同的客户端上看起来都一样。这个模板来自第三方应用程序(我无法控制)，它迭代候选人，我唯一能做的就是为每个候选人创建一个部分，类似于这样的伪代码:
for(candidate of candidates) {
<table class="zebra" width="600" border="0" cellspacing="0" cellpadding="0" align="center" style="border-collapse:collapse">
<tbody>
<tr>
<td style="padding-left:28px;"> </td>
<td class="colored-dome" valign="top" width="600" style="text-align: left; font-family:Arial; text-transform:uppercase; color:#ffffff; text-decoration:none; font-size:18px; padding:5px 38px 5px 10px;">
<span>^candidate.role^</span>
</td>
<td style="padding-left:28px;"> </td>
</tr>
</tbody>
</table>
}
正如你在这里看到的，我正在使用一个 css 类:
table.zebra:nth-child(odd) td.colored-dome {
background-color:#8274b6;
}
table.zebra:nth-child(even) td.colored-dome {
background-color:#9d9d9d;
}
因为我不能使用 nth-child: 内联选择器。所以我尝试了:
<style> tag inside <head> ,
<style> tag inside <body> (as an attempt),
css file from working remote url,
但此解决方案均不适用于 outlook 2010、hotmail、gmail。所以我的问题是:有没有办法为这些客户创建一个有效的 web-mail-zebra-striped？我们可以说这些解决方案永远不适用于 Hotmail、Gmail 或 Outlook 吗？
最佳答案
nth-child 不适用于 Outlook 或 Gmail 以及其他一些客户端。
确保此功能始终有效的解决方案是为这些电子邮件客户端内联您想要的样式。
关于html - 在 Gmail、Hotmail、Outlook 上不可能使用网络电子邮件斑马条纹表？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51045452/