时间戳

首页 > 解决方案 > 重复选标记未在电子邮件中显示，因为它在 HTML 中显示

html - 重复选标记未在电子邮件中显示，因为它在 HTML 中显示

问题描述

我最初在这个线程中询问了这个问题并得到了我对常规 HTML 的回答，但是以下代码在通过电子邮件发送时并没有显示相同的内容：

<div style="color:white; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">&#10004;</div>
<div style="color:yellow; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">&#10004;</div>
<div style="color:green; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">&#10004;</div>

这是因为微软似乎将其视为表情符号。

我已经尝试了以下代码，但没有任何变化：

<div class="unicode" style="color:white; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">&#10004;</div>

我得到的只是默认值：

示例图像

这是我目前正在使用/调整的 jinja2 模板以使其正常工作（请参阅 tbody 部分）：

jinja_tmplt = """<!DOCTYPE html>
<html lang=\"en-US\">
{% for html_CI in html_CI_list %}
    {% set columns = html_CI.tech_DF.columns.values[1:] %}
    <h1>{{ html_CI.tech_grp }}</h1><br/>
    {{ html_CI.tech_DF.to_html(index=False) }}<br>
    <style>.table tbody tr:nth-child(even) {background-color: #ABC233;} .table tbody tr:nth-child(odd) {background-color: #6CC04A;}</style>
        <table border="1" class="dataframe table table-striped">
            <thead>
                <tr style="text-align: center;">
                {% for col_hdr in columns %}
                    <th style="background-color: #005C21; text-align: center; color:white">{{ col_hdr }}</th>
                {% endfor %}
                </tr>
            </thead>
            <tbody>
                {% for row in html_CI.tech_DF.itertuples() %}
                    <tr style="text-align: center;">
                    {% for elem_data in row[2:] %}
                        {% set loop_num = loop.index0 %}
                        {% if loop_num == 0 %}
                            <td>{{ elem_data }}</td>
                        {% else %}
                            <td><div style="color:white; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; font-size: 30px;">&#10004;</div></td>
                        {% endif %}
                    {% endfor %}
                    </tr>
                {% endfor %}
            </tbody>
        </table>
{% endfor %}
</html>"""

请注意，样式中的表格着色也适用于 HTML，但不适用于电子邮件。

标签： htmlunicodeoutlookemoji

解决方案

:before不适用于 Gmail、Outlook、Yahoo 或便笺。

以下复选标记适用于每个主要的电子邮件客户端。它们可以调整大小和颜色。由于电子邮件客户端或用于显示它们的字体，它们的确切外观可能会有所不同：

  • ✓ &#x2713;- 复选标记
  • ✔ &#x2714;- 重型复选标记

样品着色：

<span style="color: #ff0000;">&#x2713; - Check Mark: red </span>

<span style="color: #0000ff;">&#x2714; - Heavy Check Mark: blue</span>

祝你好运。

推荐阅读