时间戳

首页 > 解决方案 > 为什么outlook.com 移动文本下划线？

html-email - 为什么outlook.com 移动文本下划线？

问题描述

在我的 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/

我尝试了各种跨度、hrefs 和 text-transform 的组合来解决这个问题，但无济于事。

完整的电子邮件代码在这里：https ://pastebin.com/PfNmTeZc

标签： html-email

解决方案

Outlook.com 和 Office 365 不喜欢虚拟链接。如果您包含它们，您会发现一些小的不一致，例如您看到的基于 html 的按钮背景颜色扩散到按钮下方的内容的背景。

这是一个简单（但令人讨厌）的问题，只需简单的修复即可。我使用的一种技术是在 # 之后添加句号，如下所示：

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

或者添加一个像http://www.example.com这样的虚拟 url也可以，甚至在测试时添加你的最终 url。

推荐阅读