Почему outlook.com перемещает текст с подчеркиванием? - PullRequest
Новая
       9

Почему outlook.com перемещает текст с подчеркиванием?

0 голосов
/ 06 июня 2019

В моем html-письме у меня подчеркнуты две белые ссылки, и это работает везде, кроме Outlook.com/Office 365. На этих сайтах ссылки не подчеркнуты, но есть другой несвязанный несвязанный текст?!

Подчеркивание по ссылке здесь: 

<table width="100%" border="0" cellspacing="0" cellpadding="15" bgcolor="#001342">
    <tr>
        <td width="100%" align="center" valign="middle" style="font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 24px; color: #ffffff;">
            <p>Register onto <span style="color: #ffb718;">X</span> by completing the short form <a href="#" style="color: #ffffff; text-decoration: underline!important;">here</a></p>

        </td>
    </tr>
</table>

Appears to be getting applied here instead:

<tr>
    <td width="50" align="left" valign="middle">
        <img src="images/icon-clipboard.gif" alt="" width="40" height="40" border="0">
    </td>
    <td class="list-text" align="left" valign="middle" style="font-family: Arial, Helvetica, sans-serif; font-size: 26px; line-height: 30px; color: #001342;">
        <p style="text-decoration: none!important;"><span style="color: #ffb718; font-weight: bold;">1.</span> REAL-TIME AVAILABILITY</p>
    </td>
</tr>

Вы можете увидеть проблему на скриншотах здесь http://kinocreative.uk/img/

Я пробовал различные комбинации span, hrefs и text-transform toисправить это безрезультатно.

Полный код электронной почты здесь: https://pastebin.com/PfNmTeZc

1 Ответ

0 голосов
/ 07 июня 2019

Outlook.com и Office 365 не любят фиктивные ссылки. Если вы включите их, вы обнаружите небольшие несоответствия, например, то, что вы видите, на фоне цвета фона кнопок на основе html, распространяющегося на содержимое под кнопкой.

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

<a href="#." ...></a>

Альтернативно добавление фиктивного URL-адреса, например http://www.example.com, будет работать или даже добавление ваших окончательных URL-адресов во время тестирования.

...