веб-адрес электронной почты зебра полосатый стол невозможен в Gmail, Hotmail, Outlook? - PullRequest
Новая
       104

веб-адрес электронной почты зебра полосатый стол невозможен в Gmail, Hotmail, Outlook?

0 голосов
/ 26 июня 2018

Я пытаюсь создать шаблон веб-почты в стиле «зебра», который одинаково выглядит на разных клиентах. Этот шаблон взят из стороннего приложения (которое я не могу контролировать), которое перебирает кандидатов, и единственное, что я могу сделать, для каждого кандидата - создать частичный, что-то вроде этого псевдокод : 

    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-mail-zebra-striped для этих клиентов? Можно ли сказать, что эти решения никогда не будут работать для Hotmail, Gmail или Outlook?

1 Ответ

0 голосов
/ 26 июня 2018

nth-child не работает в Outlook, Gmail и некоторых других клиентах.

Решение, обеспечивающее это всегда, заключается в том, чтобы придать стиль, который вы хотите для этих почтовых клиентов.

...