防止街道地址上的 Outlook（Web）样式更改答案

【问题标题】：Prevent Outlook (Web) Style Change on Street Address防止街道地址上的 Outlook（Web）样式更改
【发布时间】：2019-03-04 15:30:37
【问题描述】：

我正在使用一个基本的 HTML 电子邮件模板。在消息的末尾，包含一个街道地址。

当我在 Outlook Web 中打开电子邮件时；它会检测地址并将其重新设置为 Bing 地图链接。

有没有办法保留我设置的样式？

<p style="font-family: Garamond, 'Times New Roman', Times, serif;">
    123 E. Main St. SomeTown, USA 12345-6789
</p>

【问题讨论】：

我认为您不能从电子邮件端禁用此功能。不过，您可以禁用 Bing 插件。见here。
@BramVanroy 这就是我害怕的：P 但我想访问 StackOverflow 看看是否有一些我可能错过的神奇解决方案。感谢您的确认。
可能有，我只是不知道。也许其他人可以为您提供一些更有希望的信息。 :-)

标签： html html-email email-templates outlook-web-app

【解决方案1】：

您不能禁用一些电子邮件客户端中的链接，但有一些解决方法。

您可以使用零宽度非连接器&zwnj;
使用 CSS 使其看起来像普通文本
用户元标记（适用于 iOS）

Gmail：

选项 1：

将您的电话号码或地址包装在一个 span 标签中，并使用全局 CSS 来定位它。

.address{color:#000001; text-decoration:none;}

    <p style="font-family: Garamond, 'Times New Roman', Times, serif;">
        <span class="address">123 E. Main St. SomeTown, USA 12345-6789</span>
    </p>

原因是 Gmail 添加了为 href 着色的 CSS

.ii a[href] { color: #15c; }

你也可以用你的 CSS 覆盖它（试一试）。

选项 2：

您可以使用 CSS 覆盖所有链接样式，强制它从父级继承样式。

u + #body a {
    color: inherit;
    text-decoration: none;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
}

<body id="body">
</body>

iOS：

选项 1：

使用元标记禁用链接

<meta content="telephone=no" name="format-detection">

选项 2：

使用零宽度非连接符 (&zwnj;)

<p style="font-family: Garamond, 'Times New Roman', Times, serif;">
    1&zwnj;2&zwnj;3 E. Main St. SomeTown, USA 12345-6789
</p>

选项 3：

设置 tel url 方案的样式（也适用于 Android）

a[href^=tel]{ color:#000; text-decoration:none;}

选项 4：

样式化邮件的数据检测器选择器

a[x-apple-data-detectors] {
    color: inherit !important;
    text-decoration: none !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

<p style="font-family: Garamond, 'Times New Roman', Times, serif;">
    123 E. Main St. SomeTown, USA 12345-6789
</p>

希望这有助于回答您的问题。

【讨论】：

感谢您提供如此详细的回答 :)