a:visited 和 a:hover css 在 Outlook 或 Gmail 中未正确呈现

【问题标题】：a:visited and a:hover css are not rendering correctly in Outlook or Gmaila:visited 和 a:hover css 在 Outlook 或 Gmail 中未正确呈现
【发布时间】：2020-06-15 11:28:19
【问题描述】：

在电子邮件代码中，a:visited 和 a:hover CSS 样式无法在 Outlook 或 Gmail 电子邮件客户端中呈现/正常工作。我添加了如下 CSS 代码。

  /* unvisited link */
    a:link {
        color: #526175;
    }

    /* visited link */
    a:visited {
        color: #D4B038 !important;
    }

    /* mouse over link */
    a:hover {
        color: #D4B038 !important;
    }

    /* selected link */
    a:active {
        color: #D4B038 !important;
    }

    .menutxt a:visited {
        color: #D4B038 !important;
    }

    .menutxt a:hover {
        color: #D4B038 !important;
    }

【问题讨论】：

标签： javascript html css gmail html-email

【解决方案1】：

这是正确的。电子邮件客户端并不支持一切。

根据 caniemail 的说法，虽然 Outlook 和 Gmail 有许多版本，但有些版本确实有效。

:visited 支持不多：https://www.caniemail.com/search/?s=%3Avisited

:hover 不能在 Outlook 桌面上运行，但应该可以在 Gmail 桌面/网络邮件上运行：https://www.caniemail.com/search/?s=%3Ahover

我怀疑正在发生的事情是您的 <style> 中有其他 Gmail 不喜欢的内容，然后它所做的就是 删除整个 <style>...</style> 部分！因此，要隔离这一点，请使用以下内容：

<style>
a:link {
        color: #526175;
    }
a:hover
...
</style>

让您的其他风格进入另一个<style> 部分。这会隔离它们，因此如果出现错误或样式不受支持，则不会删除第一个 <style> 部分。

【讨论】：