li:before{ 内容：“■”；如何将此特殊字符编码为电子邮件文具中的 Bullit？答案

【问题标题】：li:before{ content: "■"; } How to Encode this Special Character as a Bullit in an Email Stationery?li:before{ 内容：“■”；如何将此特殊字符编码为电子邮件文具中的 Bullit？
【发布时间】：2024-01-03 08:57:01
【问题描述】：

proudly coloring my liststyle bullet without any image url or span tags 之后，通过：

ul{ list-style: none; padding:0;  margin:0;  }
li{ padding-left: 1em; text-indent: -1em;    }
li:before { content: "■"; padding-right:7px; }

尽管这些样式表在圆角边框和其他 css3 内容上都可以完美地工作，而且虽然电子邮件的收件人（例如，Eudora OSE 1）正确地呈现了所有 css 样式，就像在浏览器中一样，但存在一个问题： • 或 ■ 之类的子弹会转换为 &#adabacadabra;

最终在电子邮件中出现：

我该如何从这里开始？

【问题讨论】：

为什么不使用 list-style-type: square; 作为 ul 元素（并删除您的 li:before）？
@Sam list-style-* 属性适用于 LI 元素。因此，最好在li { } 规则中声明它们。
@Sam 这是否也发生在其他电子邮件客户端中？像 Gmail、Outlook、...
@Šime Vidas：我经常在 ul 上看到它们：alistapart.com/articles/taminglists
@Benjamin 是的，在 UL 上定义list-style 很方便。但是，在上面的代码中，ul { } 和 li { } 规则都存在，在它应用的元素（即 LI）上定义属性更有意义。但无论哪种方式都很好。

标签： css list character-encoding special-characters

【解决方案1】：

以前从未遇到过这个问题（在电子邮件上工作不多，我像瘟疫一样避免它）但您可以尝试使用 unicode 代码点声明项目符号（CSS 与 HTML 的表示法不同）：content: '\2022'。（您需要使用十六进制数，而不是 8226 十进制数）

然后，如果您使用一些东西来提取这些字符并将它们 HTML 编码为实体（这不适用于 CSS 字符串），我想它会忽略这一点。

【讨论】：

@Lea 你太棒了！这是我正在寻找的正确答案。这既适用于 previwing html，也适用于 Eudora OSE1 的电子邮件。我猜那么它将适用于我的客户用户支持 html 查看的所有现代电子邮件客户端？（我的客户不仅是非程序员，他们不知道如何禁用 html，只是希望看到布局精美的电子邮件，我想用它来美化我的小作品）
我无法回答这个问题，因为我说过我几乎没有使用过电子邮件。我很害怕，根据我从其他开发者那里听到的情况来看，这看起来像是发生在你身上的最糟糕的事情：p 这只是基于我认为可能发生的事情的建议，我很高兴看起来它起作用了。 :)
@Lea 谢谢。总结这个谜团的最后一个小问题：既然它现在可以工作，你推荐哪个网站来查找正确的十六进制数字，如 \2022 或 ■ 非常感谢。
我已经为我的个人需求编写了一个小脚本，但请注意，它的边缘非常粗糙（缓慢、糟糕的 UI），因为我只是为我个人使用而编写的：leaverou.me/scripts/unicode.html 另外，如果您使用的是 Mac，则可以使用字符查看器。 Win也有一个Character Map，我认为它也显示了十六进制数字。
Lea Verou 网站的正确链接应该是lea.verou.me/scripts/unicode.html

【解决方案2】：

你可以试试这个：

ul { list-style: none;}

li { position: relative;}

li:before {
    position: absolute;  
    top: 8px;  
    margin: 8px 0 0 -12px;    
    vertical-align: middle;
    display: inline-block;
    width: 4px;
    height: 4px;
    background: #ccc;
    content: "";
}

感谢post，它对我有用。

【讨论】：

这是一个绝妙的主意。

【解决方案3】：

您面临双重编码问题。

■ 和&amp;#8226; 是绝对等价的。两者都引用Unicode character 'BULLET' (U+2022)，并且可以在 HTML 源代码中并排存在。

但是，如果该源代码在某个时候再次被 HTML 编码，它将包含■ 和&amp;#8226;。前者保持不变，后者将显示为“•”在屏幕上。

在这些情况下这是正确的行为。您需要找到多余的第二次 HTML 编码发生的点并摆脱它。

【讨论】：

【解决方案4】：

Lea 的转换器不再可用。我刚刚用了这个converter

步骤：

在工具的绿色输入字段中输入 Unicode 十进制版本，例如 8226。
按Dec code points
查看Unicode U+hex notation框中的结果（例如U+2022）
在您的 CSS 中使用它。例如content: '\2022'

ps。我与该网站没有任何联系。

【讨论】：

【解决方案5】：

您不应该在电子邮件中使用 LI。它们在电子邮件客户端中是不可预测的。相反，您必须像这样对每个项目符号点进行编码：

<table width="100%" cellspacing="0" border="0" cellpadding="0">
    <tr>
        <td align="left" valign="top" width="10" style="font-family:Arial, Helvetica, Sans-Serif; font-size:12px;">&bull;</td>
        <td align="left" valign="top" style="font-family:Arial, Helvetica, Sans-Serif; font-size:12px;">This is the first bullet point</td>
    </tr>
    <tr>
        <td align="left" valign="top" width="10" style="font-family:Arial, Helvetica, Sans-Serif; font-size:12px;">&bull;</td>
        <td align="left" valign="top" style="font-family:Arial, Helvetica, Sans-Serif; font-size:12px;">This is the second bullet point</td>
    </tr>
</table>

这将确保您的项目符号适用于每个电子邮件客户端。

【讨论】：

这是对数据列表的滥用表格。如果您不能使用 CSS 覆盖列表项目符号，那么请接受它。正确使用列表还具有以下优点：对于禁用 HTML 的邮件客户端，可以更轻松地将其转换为文本。
LI 会导致跨浏览器出现渲染问题。浏览器应用到 LI 的原生样式太多，您必须在内联 css 中预测和重置。这不是我在网络上推荐的东西。但是，我们在这里谈论电子邮件。你必须像 1999 年那样编写代码
特别是 LI:before 在电子邮件中不起作用，因为 Outlook 不支持 css 伪选择器，因此使用 LI 无法控制项目符号格式。如果您想要任何一致的控制（如问题所要求的那样），您必须使用表格。
现在是 2018 年，如果我想控制它们在所有电子邮件客户端/用户代理中的呈现方式，我仍然需要像这样对列表和行项目进行编码，特别是因为我有客户和客户不这样做了解为什么即使电子邮件应用程序/网络邮件客户端由同一家公司制造（我在看着你，微软！），相同的无序列表呈现不同的原因。如果你要在电子邮件中使用语义 HTML，你会发疯的。

【解决方案6】：

这个网站可能会有所帮助，

http://character-code.com

这里可以复制，直接放到css html上

【讨论】：

这个网站没有帮助，因为它没有列出 OP 中描述的字符