3

最近在编码和 HTML 电子邮件时，我注意到 Yahoo! 开始劫持某些链接和关键字，添加一个<span class='yshortcuts'>改变文本和链接颜色的，这可能会导致一些非常糟糕的渲染问题。

雅虎的“修复”！建议非常难看（在所有受影响的链接和关键字中添加一个跨度） - 远非一个简单的通用解决方案，尤其是当他们将样式应用于看似任意的文本时。

我想知道是否可以简单地覆盖他们的课程，以及如何使用 css 删除该color属性。（虽然<style>并非所有主要电子邮件平台都支持块，但 Yahoo! 支持......并且不支持它的那些，优雅地忽略它。）

就像是 <style> .yshortcuts{color:none;} </style>

我知道这color:none;是无效的，并且不能普遍适用。

有任何想法吗？

4

5 回答 5

1

在挖掘和艰难之后，这似乎是处理问题的最佳方法（在我看来）。

  1. 在电子邮件顶部，添加此样式块。这将解决大多数浏览器中的大部分问题。

    <style>
.yshortcuts{color:inherit;}
</style>

  2. <a>因为我们希望 IE 用户也能开心，所以在每个引起问题的地方插入一个带有颜色样式的跨度。例如：

    <a href="http://google.com" style="#c912dc"><span style="#c912dc">Google</span></a>

这应该在几乎所有情况下修复它。

由于如果您已经对文件进行了编码，手动执行这可能会很痛苦，因此您可以执行正则表达式查找/替换，它应该有助于加快速度（但您的里程可能会有所不同......在 Textmate 中有效）：

寻找：

(<a[^>]*style=".*color:#(\w{6}).*".*>)(.+)(</a>)

代替：

$1<span style="color:#$2;">$3</span>$4
于 2010-07-19T21:51:21.180 回答
0

你可以试试

.yshortcuts { color: auto !important }

不过，我不知道这会退回到什么 - 浏览器的默认颜色，或级联中的下一个颜色定义。这将取决于存在的其他 CSS 规则。

如果这不起作用，我认为你必须用定义的新颜色覆盖它。

于 2010-07-15T16:57:07.503 回答
0

您可以通过 CSS 中更具体的选择器覆盖颜色

body #content .yshortcuts{color:inherit;}
于 2010-07-15T17:03:01.050 回答
0

要跨浏览器工作，您可以向您的 css 添加一些定义以保持您定义的颜色。例如，假设你的 css 中有这个：

p {color: black}
a {color: blue}

现在，我不确定您.yshortcuts是在包装a标签还是位于a标签内，但为了便于说明，我将假设它们围绕a，因此解决方案是将您的 css 更改为：

p, p .yshortcuts {color: black}
a, .yshortcuts a {color: blue}

基本上，您必须color在 css 中定义的任何地方执行此操作（假设 Yahoo! 可以对任何文本执行此操作）。这不像给出的其他解决方案那样优雅，但应该适用于 IE6。

于 2010-07-15T19:05:02.963 回答
0

不幸的是，我发现要在大多数电子邮件客户端中获得可靠的样式，内联样式是唯一的方法。有些删除了头部声明的任何样式，有些添加了自己的类，有些添加了随机的额外元素 - 但是通过为每个元素提供自己的内联样式 - 以及一些非常棒的表格 - 我已经让它在每个主要客户端中一致地呈现- Gmail、Outlook、Hotmail、Yahoo 等。

这篇文章对于查看谁支持什么以及在哪里支持非常有用：http: //www.campaignmonitor.com/css/

于 2010-07-15T19:38:23.397 回答