Question

我正在创建电子邮件模板并遇到子弹列表问题。我无法将列表中的图像与Chrome一起使用，我想坚持使用列表样式图像，而不是在li-tag上使用背景图像...是否有解决方案？

ul {
list-style-image: url('../images/Bullet_list_check_sign.png') !important;
display: inline-block !important;
padding-left: 20px !important;
}
ul li {
line-height: 45px !important;
padding-left: 15px !important;
display: list-item !important;
}

<div>
<ul>
<li>Nulla efficitur felis</li>
<li>Nulla efficitur felis</li>
</ul>
</div>

谢谢， Ĵ

Answer 1

技术上，<ul>，<ol>和<li>在电子邮件中作为语义标记支持，但我们无法像在网络上那样使用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>

Answer 2

https://www.campaignmonitor.com/css/

Gmail不支持list-style-type样式。另一个解决方案可能是内联图像并“伪造”子弹定位。

list-style-image在chrome中无法使用gmail

2 个答案: