Outlook 2013 中的项目符号点图像对齐问题答案

【问题标题】：Bullet Point Image alignment Issues in Outlook 2013Outlook 2013 中的项目符号点图像对齐问题
【发布时间】：2013-09-17 22:15:42
【问题描述】：

我一直在创建一个 HTML 电子邮件，在 litmus 中进行了测试，除了在 Outlook 2013 之外的大多数版本的 Outlook 中，项目符号点图像显示在文本下方，这里是代码。

<table border="0" cellpadding="2" cellspacing="0">
  <tr>
    <td valign="top" width="15">
      <img src="https://s3-eu-west-1.amazonaws.com/dnx-sap-01/324/3/spacer.gif"  height="8" width="15">
    </td>
    <td valign="top" width="12">
      <img src="https://s3-eu-west-1.amazonaws.com/dnx-sap-01/324/3/BulletGold_Roundtest.jpg" width="7" height="11"/>
    </td>
    <td valign="top" style="font-family:Arial, Helvetica, sans-serif; color:#222222; font-size:11px;">
      <b>Guide:</b> <a href="http://www.sap.com/">How to get started with Big Data</a>
    </td>
  </tr>
  <tr>
    <td valign="top" width="15">
      <img src="https://s3-eu-west-1.amazonaws.com/dnx-sap-01/324/3/spacer.gif"  height="8" width="15">
    </td>
    <td valign="top" width="12">
      <img src="https://s3-eu-west-1.amazonaws.com/dnx-sap-01/324/3/BulletGold_Roundtest.jpg" width="7" height="11">
    </td>
    <td valign="top" style="font-family:Arial, Helvetica, sans-serif; color:#222222; font-size:11px;">
      <b>Benchmarking Assessment Tool:</b> <a href="https://valuemanagement.sap.com/Sapbenchmarking_Portal.html#ID=340" target="_blank">SAP Big Data Maturity Model</a>
    </td>
  </tr>

  <tr>
    <td valign="top" width="15">
      <img src="https://s3-eu-west-1.amazonaws.com/dnx-sap-01/324/3/spacer.gif"  height="8" width="15">
    </td>
    <td valign="top" width="12">
      <img src="https://s3-eu-west-1.amazonaws.com/dnx-sap-01/324/3/BulletGold_Roundtest.jpg" width="7" height="11">
    </td>
    <td valign="top" style="font-family:Arial, Helvetica, sans-serif; color:#222222; font-size:11px;">
      <b>Video Whitepaper:</b> <a href="http://www.sap.com/">Shining a Light on the Value of Big Data</a>
    </td>
  </tr>
</table>

【问题讨论】：

好久没看到“spacer”了。但是，好的，这是电子邮件，所以请原谅。任何让它工作的东西。无论如何，您是否尝试过简单地将所有valign="top" 替换为valign="bottom"？

标签： html outlook html-table html-email

【解决方案1】：

这很奇怪，因为它看起来应该可以正常工作......

也许可以尝试设置表格和所有单元格的宽度，以便总宽度加起来相同。您还可以通过使用以下内容交换行来简化代码：

  <tr>
    <td valign="top" align="right" width="27">
      <img src="https://s3-eu-west-1.amazonaws.com/dnx-sap-01/324/3/BulletGold_Roundtest.jpg" width="7" height="11" style="margin: 0; border: 0; padding: 0; display: block;" />
    </td>
    <td valign="top" width="273" style="font-family:Arial, Helvetica, sans-serif; color:#222222; font-size:11px;">
      <b>Guide:</b> <a href="http://www.sap.com/">How to get started with Big Data</a>
    </td>
  </tr>

您也应该始终在图像上使用display:block;。看看情况如何...

【讨论】：

【解决方案2】：

我的解决方案是完全删除图像，并使用 Unicode 字符 &bull; "•" 将图像编码为您想要的颜色、字体大小、字体粗细和填充。将文本与文本对齐比将图像与文本对齐要容易得多。

<td valign="top" width="12">
  <img src="https://s3-eu-west-1.amazonaws.com/dnx-sap-01/324/3/BulletGold_Roundtest.jpg" width="7" height="11">
</td>

替换为

<td valign="top" width="12" style="font-family:Arial, Helvetica, sans-serif; font-size:13px; font-weight:bold; color:#ffcc33 ; padding:5px 0 0 0;">
  &bull;
</td>

【讨论】：