Question

我的ITSM应用程序可以使用模板发送HTML电子邮件，但它使用像[keyword1]这样的关键字的简单替换，我希望滥用这些关键字（非空）以动态显示或隐藏某些数据。

例如，模板可能是：

<body>
  <span>some label: [keyword1]</span>
</body>

由于大多数电子邮件客户端都不会运行任何客户端脚本，并且我的ITSM上的替换引擎非常有限我虽然我可以使用带有选择器的css来隐藏span，如果它有一些（任何）类并且类将被设置实际更换价值。

我提出了css：

span {visibility: visible; display: block; }
span[class|=''] {visibility: hidden; display: none; }

然后在html模板体中：

<table cellpadding="0" cellspacing="0" border="0" align="center">
  <tr>
    <td width="200" valign="top"><span class="[something]">[something]</span></td>
    <td width="200" valign="top"><span class="">empty class value</span></td>
    <td width="200" valign="top"><span>span without class</span></td>
  </tr>
</table>

所以我的想法是，如果存在替换标记值，它将被指定为跨度的类，因此保持可见但如果不是，则类名称将为空，因此隐藏跨度。没有任何类的跨度也是可见的。这在测试概念时在Chrome中运行良好，并且仅隐藏“空类值”范围，但在实际的电子邮件客户端Outlook 2010中不起作用。

除了这个方法在创建正确的模板时很麻烦，因为任何类的任何跨度都将被隐藏，任何人都可以建议如何实现这一点吗？

编辑：我已更改主题以更好地反映问题

Answer 1

你正在使用CSS3，这对于Outlook来说太先进了。

我甚至不确定你的[class|='']选择器是做什么的; [foo|='bar']表示属性foo必须有以连字符分隔的值列表，bar必须是第一个，因此[class|='']将匹配<span class="-thing">或者它将将span与class属性相匹配，无论其内容如何。

我认为你想要后者，所以你不妨使用CSS2方式：

span {visibility: visible; display: block; }
span[class] {visibility: hidden; display: none; }

另请注意，visibility: hidden会移除元素但保留其位置，而display: none完全删除元素，而不保留其间距。您可以删除visibility两个声明。

我没有Outlook确认这一点，但是你应该比以前使用的CSS3代码更幸运。

Answer 2

在这种情况下，解决方案可能是微不足道的。由于替换值可以为空，所以需要做的就是将选择器用于空类，即：。

span[class=""] {visibility: hidden; display: none; }

任何其他值都将按默认范围样式显示，包括没有类的。

但是，Outlook不支持selector。

因此，我能想到实现这一目标的唯一方法是在替换令牌上添加一些内容。如果替换值为空，则只有前置的内容将保留在类名中。

因此，最终的解决方案是：

// in CSS
span.hide {visibility: hidden; display: none; }
// then in HTML template body
<span class="hide[somekey1]">Label: [somekey1]</span>

我测试的是积极的效果。

使用CSS隐藏HTML电子邮件模板中的替换值

2 个答案: