我正在尝试创建一个具有斑马条纹样式的网络邮件模板,该模板在不同的客户端上看起来相同。该模板来自第三方应用程序(我无法控制),该应用程序迭代候选者,我唯一能做的就是为每个候选者创建一个部分,如下所示伪代码:
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。所以我的问题是:有没有办法为这些客户创建一个可用的网络邮件斑马条纹?我们是否可以说这些解决方案永远不适用于 Hotmail、Gmail 或 Outlook?
nth-child 不适用于 Outlook 或 Gmail 以及其他一些客户端。
- https://www.campaignmonitor.com/css/selectors/nth-child/ https://www.campaignmonitor.com/css/selectors/nth-child/
确保始终有效的解决方案是内联您想要为这些电子邮件客户端提供的样式。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)