Пытаюсь использовать условия MSO в моем электронном письме, но при отправке в Outlook создаются дубликаты кнопок. Как мне это исправить?

#html #css #email #outlook #html-email

#HTML #css #Адрес электронной почты #outlook #html-email

Вопрос:

Я новичок в создании собственных электронных писем и хочу учиться на своих ошибках. Я создавал электронное письмо и хотел добавить к нему кнопку возврата с помощью стиля. Я добавил условие mso, но когда электронное письмо было отправлено, оно появляется в Outlook в таком виде. На других платформах электронной почты это отображается так, как должно (только 1 кнопка). Я не уверен, что я делаю не так и почему он показывает double. дублирующиеся кнопки

Вот мой код:

 <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
    <tr>
        <td>
            <div>
                <!--[if mso]>
                    <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="@COUPONURL" style="height:40px;v-text-anchor:middle;width:300px;" arcsize="5%" strokecolor="#5cbf50" fillcolor="#5cbf50;width: 130;">
                        <w:anchorlock/>
                        <center style="color:#ffffff;font-family:Helvetica, sans-serif;font-size:18px; font-weight: 600;">Click here!</center>
                    </v:roundrect>
                <![endif]-->
                <a href="@COUPONURL" style="display: inline-block; mso-hide:all; background-color: #5cbf50; color: #FFFFFF; border:1px solid #5cbf50; border-radius: 6px; line-height: 220%; width: 300px; font-family: Helvetica, sans-serif; font-size:18px; font-weight:600; text-align: center; text-decoration: none; -webkit-text-size-adjust:none;  " target="_blank">CLICK HERE TO REDEEM</a>
                </a>
            </div>
        </td>
    </tr>
</table>

Ответ №1:

Проблема в том, что вы только делаете кнопку Outlook условной.

Вам нужно добавить логику, чтобы показывать только одно Или другое.

 <!--[if mso]>
    Button for Outlook
<![endif]-->

<!--[if !mso]><!-- -->
    Button for everything else
<![endif]-->