Outlook显示矩形而不是li子弹列表

问题描述 投票:0回答:2

我正在发送一个包含html和php的简报,我遇到了ul> lis而不是子弹矩形的问题

Outlook中保存的html显示html列表转换为spans:

<span style="font-size:10.0pt;
      font-family:Symbol;mso-fareast-font-family:Symbol;mso-bidi-font-family:
      Symbol"><span style="mso-list:Ignore">·<span style="font:7.0pt &quot;Times New Roman&quot;">&nbsp;&nbsp;&nbsp;
      </span></span></span>

有什么解决方案吗?

html css utf-8 outlook newsletter
2个回答
2
投票

Digital_Frankenstein的答案会奏效,虽然它有点冗长。

或者,在Outlook中支持使用list-style-type: disc;

<ul style="padding: 0; margin: 0; list-style-type: disc;">
  <li>...</li>
  <li>...</li>
</ul>

这是我喜欢的方法;它是语义和可访问的。但是,您必须确保列表正确间隔,因为默认情况下不同的电子邮件客户端会执行不同的操作。我通常会这样做:

<ul style="padding: 0; margin: 0; list-style-type: disc;">
  <li style="margin: 0 0 0 15px;">One</li>
  <li style="margin: 0 0 0 15px;">Two</li>
  <li style="margin: 0 0 0 15px;">Three</li>
</ul>

2
投票

可能只是渲染引擎之间的渲染差异。

&bull;可用于模仿子弹点。使用它的最佳方法是将所有这些放在一个表中,并使用&bull;和行来分隔您的点。

像这样:

<table>
  <tr>
    <td style="color:xxx; font-size:xxx;">&bull;</td>
    <td>Text</td>
  </tr>
  <tr>
    <td style="color:xxx; font-size:xxx;">&bull;</td>
    <td>Text</td>
  </tr>
  <tr>
    <td style="color:xxx; font-size:xxx;">&bull;</td>
    <td>Text</td>
  </tr>
</table>
© www.soinside.com 2019 - 2024. All rights reserved.