HTML 电子邮件 Outlook答案

【问题标题】：HTML Email OutlookHTML 电子邮件 Outlook
【发布时间】：2015-10-15 19:14:56
【问题描述】：

我对 HTML 电子邮件及其在 Outlook 2007 和 2010 中的呈现方式有疑问。

这段代码 sn-p 中有 2 个部分导致我出现问题。

    <ul style="margin-left:-30px">
        <li style="list-style-image:url(images/blue_bullet.png); padding-bottom:7px;">Bullet 1</li>
        <li style="list-style-image:url(images/blue_bullet.png); padding-bottom:7px;">Bullet 2</li>
        <li style="list-style-image:url(images/blue_bullet.png); padding-bottom:7px;">Bullet 3</li>
    </ul>

我已查看此链接http://www.campaignmonitor.com/css/

它说padding 与div 和p' 不兼容，但它没有提到缺乏对li 的支持。在li 之间添加一些空格的最佳方法是什么？

此外，列表样式图像也不会呈现，在 hotmail 中它只是呈现为普通光盘，这对我来说是可以的，但在 Outlook 中它什么都不是。我可以使用list-style-type:square;，但以某种方式使其更大更蓝吗？

【问题讨论】：

您将需要 http:// 作为图片网址，作为开始。电子邮件没有“图像”文件夹。
谢谢，我知道我只是想减少块中的代码量，而且我不希望我的图像服务器公开。
Outlook 2007/2010 不支持背景图像，如 CampaignMonitor 页面所述。
谢谢我现在明白了，但是你知道更好的方法来完成这个吗？
使用 UTF-8 字符代替图像：utf8-chartable.de/…

标签： html css email outlook

【解决方案1】：

这是在 html 电子邮件中处理列表的最安全、最一致的方式。我知道更多代码，但它会在所有主要客户端上完美呈现。

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="30" valign="top">&bull;
    </td>
    <td valign="top" height="30">List Item 1
    </td>
  </tr>
  <tr>
    <td width="30" valign="top">&bull;
    </td>
    <td valign="top" height="30">List Item 2
    </td>
  </tr>
  <tr>
    <td width="30" valign="top">&bull;
    </td>
    <td valign="top" height="30">List Item 3
    </td>
  </tr>
</table>

&bull; 位于单独的表格单元格中，因此如果您有一个多行列表项，则项目符号和“填充”保持在正确的位置。如果您想要不同的项目符号类型，只需在 ascii 表中找到一个字符来代替 &bull;。你也可以使用图片...

【讨论】：

感谢约翰，在我到达这里没有得到回应后，我回到桌子上。尝试了其他一些东西，但是在用一张桌子对其进行测试之后，它就可以完美地工作了。我只是不是表格 LOL bvv 的忠实粉丝，但我想在 HTML 电子邮件中这是必须的

【解决方案2】：

如果您正在制作电子邮件，并且希望它们在所有电子邮件客户端上工作，请使用表格并设置宽度 - 如果您想让它具有响应性，那就是另一回事了，并且只适用于大多数电子邮件客户端。

John 已经为这个例子给出了正确和最准确的答案 - 但是如果您正在制作 html 电子邮件，那么请确保您将任何网页设计心态留在家里，因为假设大多数事情都会以相同的方式工作，这会成为一个障碍。电子邮件是另一个世界的人。祝你好运！

【讨论】：