Question

最近编码和HTML电子邮件时，我发现雅虎！开始劫持某些链接和关键字，添加<span class='yshortcuts'>更改文本和链接的颜色，这可能会导致一些非常糟糕的渲染问题。

Yahoo!的'修复'建议非常难看（在所有受影响的链接和关键字中添加一个范围） - 远非简单的通用解决方案，特别是当它们将样式应用于看似任意的文本时。

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

喜欢的东西 <style> .yshortcuts{color:none;} </style>

我知道color:none;无效，并且不能普遍使用。

任何想法？

Answer 1

你可以尝试

.yshortcuts { color: auto !important }

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

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

Answer 2

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

body #content .yshortcuts{color:inherit;}

Answer 3

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

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

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

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

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

Answer 4

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

这篇文章非常有用，可以看到谁支持哪些内容： http://www.campaignmonitor.com/css/

Answer 5

在挖掘和挖掘后，似乎这是解决问题的最佳方法（在我看来）。

在电子邮件顶部添加此样式块。这将解决大多数浏览器中的大多数问题。
```
<style>
.yshortcuts{color:inherit;}
</style>
```
由于我们希望IE用户也感到满意，因此在每个导致问题的<a>内插入带有颜色样式的跨度。 E.g：
```
<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

如何禁用先前定义的CSS类中定义的颜色

5 个答案: