列表样式图像不适用于 Chrome 中的 Gmail

Question

我正在创建电子邮件模板并遇到项目符号列表问题。我可以 \xc2\xb4t 获取列表中的图像以与 Chrome 一起使用，我想坚持使用列表样式图像而不是在 li-tag 上使用背景图像...有解决方案吗？

\n\n

ul {\nlist-style-image: url('../images/Bullet_list_check_sign.png') !important;\ndisplay: inline-block !important;\npadding-left: 20px !important;\n}\nul li {\nline-height: 45px !important;\npadding-left: 15px !important;\ndisplay: list-item !important;\n}\n\n<div>\n<ul>\n<li>Nulla efficitur felis</li>\n<li>Nulla efficitur felis</li>\n</ul>\n</div>\n

\n\n

谢谢，\nJ

\n

Answer 1

从技术上讲<ul>，电子邮件中支持<ol>、 和<li>作为语义标签，但我们无法像在 Web 上那样使用 CSS 可靠地控制它们。很多时候我们都被电子邮件客户端决定如何显示它们所困扰。不理想。

如果您想要一致显示的列表，最好将列表创建为<table>：

<!-- Bullet List -->
<table cellpadding="2" cellspacing="2" border="0"> 
  <tr>
    <td style="vertical-align:top;">&#8226;</td>
    <td>List Item 1</td>
  </tr>
  <tr>
    <td style="vertical-align:top;">&#8226;</td>
    <td>List Item 2</td>
  </tr>
  <tr>
    <td style="vertical-align:top;">&#8226;</td>
    <td>List Item 3</td>
  </tr>
</table>