Question

我正在尝试创建一种斑马条纹样式的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;">&nbsp;</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;">&nbsp;</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邮件斑马条纹？我们能否说这些解决方案永远不适用于Hotmail，Gmail或Outlook？

Answer 1

nth-child在Outlook或Gmail和其他一些客户端中不起作用。

https://www.campaignmonitor.com/css/selectors/nth-child/

确保此方法始终有效的解决方案是内联那些电子邮件客户端所需的样式。

Gmail，Hotmail和Outlook上无法使用网络电子邮件斑马条纹表吗？

1 个答案: