支持PSEUDO CSS（2007、2010、2016、2017等）

Question

我设计了一个HTML电子邮件，我遇到了以下问题：首先，我的整个设计基于蓝色，因此读者/用户无法读取任何蓝色文本，文本必须为白色。 GMAIL自动为电话号码和蓝色链接，但主要问题是Microsoft Outlook OWA。

要修复GMAIL中的电话号码和链接着色，我执行了以下操作：

<a style="color: #FFFFFF; 
   text-decoration: none" 
   href="#/">
       <span style="color: #FFFFFF; 
                    text- decoration: none">
           1800-000-0000
       </span>
</a>

这适用于GMAIL和其他任何地方，但我提到我的大部分客户端都使用Outlook或MS OWA（Outlook Web应用程序）。

OWA忽略我在内联样式中设置的颜色，并使链接默认为蓝色;这仅在预览电子邮件时发生。如果您实际打开电子邮件，则所有样式都会启动。

我的困境是，我该怎么办？我已经放弃了希望，但这是我的最后一招。有没有办法覆盖Outlook OWA的链接颜色？我使用了！重要的是，FONT标签，NESTING到5度。

这里的问题不是Outlook，而是OWA。

以下是我在Chrome中检查元素时的屏幕截图：

Screenshot of Google Chrome Developer Panel

这是FF：

enter image description here

有什么想法吗？

请！

Answer 1

您可以通过包含现代HTML中不推荐使用的<font>声明来获得成功，尽管某些版本的OWA仍然尊重它：

<a style="color: #FFFFFF; text-decoration: none" href="#/"><span style="color: #FFFFFF; text- decoration: none"><font color="#FFFFFF">1800-000-0000</font></span></a>

Answer 2

Outlook Web App（OWA）链接颜色从内联样式更改。我花了几个小时尝试更改/修复OWA中的链接颜色，它删除了我正在创建的电子邮件模板的内联样式。我用+标签尝试了各种技术但没有成功。终于找到了似乎有用的东西：

      <a href="http://www.somewebsite.com.au/" target="_blank" style="color:#FFFFFF;">White Link</a>

将其更改为：

      <a href="http://www.somewebsite.com.au/" target="_blank" style="color:#FFFFF6;">White Link (almost)</a>

到目前为止似乎很好。

进一步测试。我将略微偏离的颜色放在<td style="color:#FFFFF6;">上，然后是<a href="http://www.somewebsite.com.au/" target="_blank" style="color:#FFFFFF;">

上的正确颜色

Answer 3

它是Outlook的一个已知错误，如果锚标记不包含有效的URL，那么将忽略所述标记的样式。

在这种情况下，添加！important的趋势也会对你不利，因为Outlook会完全忽略任何后缀为！important的标签。

在您的锚标记上放置一个URL，或将文本包装在锚点内的span标记中，然后将样式放在那里。

Answer 4

我已经能够通过在a标记内放置一个表来解决这个问题。

<a href="">
    <table>
        <tr>
            <td style="color: #FFFFFF">Link text here</td>
        </tr>
    </table>
</a>

Answer 5

图。就在我们已经习惯于不能使用酷的新电子邮件技巧因为Outlook不支持它们时，微软会向我们抛出OWA，并带来一大堆新bug。

我们通过将display:inline-block应用于链接来解决其糟糕的链接样式问题。这至少摆脱了下划线。我不知道为什么。

我们在尝试将链接设置为与父元素相同的颜色时遇到了另一个错误。出于某种原因，使父元素的颜色不同固定它。向上或向下改变一个字符通常会给你一个非常接近的颜色。

<td style="color:#CCCCCD">
<a href="http://mylink" style="display:inline-block; color:#CCCCCC">Link</a>
</td>

Answer 6

我使用了以下内容，它在Outlook 2007,2010,2013和Outlook.com中运行良好。我会尽快与OWA核实。

#outlookLink {text-decoration: none; color: #ffffff !important}
<a href="" id="outlookLink" name="Anchor" style="text-decoration: none; color: #ffffff !important;">Your text and link here.</a>

Answer 7

我还注意到，对于 OWA，style= 属性中项目的order 可能是相关的。我在使用时见过案例：

<a href="/some_url" style="text-decoration: none; color: inherit;">...</a>

会导致 OWA 去除 color 属性（但保留 `text-decoration），但颠倒顺序，例如：

<a href="/some_url" style="color: inherit; text-decoration: none;">...</a>

会让 OWA 保留两者。我看不出有任何意义，但这就是它的方式......

我还看到标签的上下文会影响这种样式剥离：当 a 标签前面有 h2 标签时会触发我上面提到的剥离，但删除了 {{1}还可以防止 OWA 剥离标签（不过，我还没有调查具体何时或为什么会发生这种情况，只是想指出上下文在这里也可能相关）。

我意识到这些都不是原始问题的直接答案，但我想这对带着类似问题来到这里的其他人会有所帮助。

Answer 8

OWA实际上剥离了a-tag的所有样式，包括你包含的span-tag的样式。您可以在头部添加样式，但OWA再次忽略了超链接的样式。我添加了一个样式，a：a：link，a：在头部访问，颜色与a-tag相同，包括span-tag。结果？我的链接文字是彩色的，但下划线仍然是默认的蓝色。线索：对我来说没有任何线索。

Answer 9

发送HTML电子邮件时，最佳做法是坚持使用旧的HTML3和HTML4。电子邮件客户端不能很好地使用CSS2及以上版本。内联CSS的工作要好得多。

而不是：

<a style="color: #FFFFFF; text-decoration: none" href="#/">
 <span style="color: #FFFFFF; text- decoration: none">1800-000-0000</span>
</a>

顺便说一下，在这行中你有语法错误，在每个css声明之后你需要一个;

修正：

<a style="color: #FFFFFF; text-decoration: none;" href="#">
  <span style="color: #FFFFFF; text- decoration: none;">1800-000-0000</span>
</a>

试试这个：

<a color="#FFFFFF" text-decoration="none" href="#">
  1800-000-0000
</a>

不要忘记在DOCTYPE上指定HTML版本。

我发现自己在这种情况的双方都在工作。我使用PHP和IMAP在一个基于Web的电子邮件客户端上工作，我不得不删除HTML电子邮件很多事情，因为他们不仅打破了应用程序的布局，而且打破了按钮和表单的预期行为。怎么样？你可能会问。使用桌面电子邮件客户端这可能不是一个问题，但基于Web的电子邮件客户端加载外部css / js文件可能导致一系列潜在的陷阱令人讨厌的错误。

另一次，我正在处理通过HTMl电子邮件发送的婚礼请柬，我们必须做的内联css的数量是荒谬的。为了使它成功你主要使用HTML3，可能还有一些HTML4，但不是太多。

我建议您尝试使用表格并弃用HTML3 inline css。

Answer 10

尝试为每个相关链接添加一个类my-link，并在style标记中添加以下CSS：

.my-link a,
a[x-apple-data-detectors] {
  color:inherit !important;
  text-decoration: underline !important;
}

这通常适合我。如果失败，这里有一个更重的代码版本：

.my-link a,
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;
}

source

Answer 11

我看到了这个帖子，并尝试了上面的选项。 TD黑客工作改变了十六进制代码，但如果有人想尝试，我只是偶然发现了一个很好的解决方案：

{{1}}

OWA支持将DIV设置为文本修饰NONE。我个人被要求删除下划线，所以对我来说这是完美的。

我希望人们觉得这很有用。感谢所有添加了解决方案的人。

Answer 12

截至今日21-12-2017，此问题仍然具有现实意义。我在Outlook，Gmail中的代码没有问题，但在Outlook Web App中没有问题。我不得不使用这个过时的标签来解决它。

<a class="app-link" style="font-size:14px; color:#ff6600 !important; text-decoration:underline;" href="https://somesite/something/"><font color="#ff6600 !important;"> Gå til app</font></a>

奇怪的是，超链接中的样式不适用于Outlook Web App（OWA），因此添加<font color="#ff6600 !important;">有效！奇怪，但这就是微软想要取笑我们的方式！

Answer 13

<a href="#" style="color: #FFF;"><strong style="color: #FFF; font-weight: normal;">Example Link</strong></a>

它为我工作！确保使用<strong>，我尝试将其与其他标签一起使用，但这没用。

Answer 14

**

支持PSEUDO CSS（2007、2010、2016、2017等）

这就像黑客一样，因为它不支持。

<a href="#" target="_blank" style="font-size:20px;">
   <strong style="color:#ffffff;">@Model.TelephoneTextHtml</strong>
</a>

HTML电子邮件链接颜色困境

14 个答案:

支持PSEUDO CSS（2007、2010、2016、2017等）

这就像黑客一样，因为它不支持。