Question

我正在用html和php发送简讯，而ul> lis有问题而不是显示项目符号矩形

从Outlook保存的html显示html列表已转换为跨度：

<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>

有什么解决方案吗？

Answer 1

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

•可用于模仿项目符号点。最好的使用方法是将所有内容放到表中，并使用•和行分隔点。

赞：

<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>

Answer 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>

Outlook显示矩形而不是li项目符号列表

2 个答案: