Outlook PC 中的 HTML 电子邮件图像/产品名称问题

Question

我遇到了 Outlook PC 的问题，它不想很好地放置我的产品图片和产品名称。

在我们测试过的所有其他电子邮件客户端中，名称如我们预期的那样出现在产品下方，但是对于 Outlook PC，我们让产品名称像这样在图像旁边凸起 - Product names next to image

我的问题是我们如何让它停止？哈哈。我包含了其中一个产品的代码以展示我们正在做的事情，但出于显而易见的原因删除了指向我们网站的链接。

<!-- Product 1 --> 
    <td valign="top" align="center" class="product-image-wrapper" style="display: block; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: 'Century Gothic', 'MS Serif', 'New York', Tahoma, Arial, Helvetica, 'Open Sans'; width: 25%; padding-bottom: 20px; margin: 0;">
      <a href="#" target="_blank" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-family: 'Century Gothic', 'MS Serif', 'New York', Tahoma, Arial, Helvetica, 'Open Sans'; text-align: center; line-height: 1.3; font-weight: 300; width: 100%; display: block; color: #53565a; text-decoration: none; margin: 0; font-size: 10px;">
        <span style="font-family: 'Century Gothic', 'MS Serif', 'New York', Tahoma, Arial, Helvetica, 'Open Sans'; width: 146px; height: 146px; display: block; margin: 0 auto 5px; border: 1px solid #edeeee;"> 
          <img src="http://placehold.it/146" alt="Place Holder Image" width="146" style="display: block; -ms-interpolation-mode: bicubic; height: auto !important; line-height: 100%; outline: none; text-decoration: none; width: 146px; margin: 0 auto; border: 0;" />
        </span>
          First Christmas Personalized Ornament
      </a>
    </td>
<!-- // End Product 1 -->

我认为文本需要包含在某些东西中，但我不确定是什么或如何。因此，我们将不胜感激任何建议、提示或帮助。

如果您需要我提供有关代码外观的更多详细信息，请告诉我。通过内联 HTML 电子邮件，除了一些特定于移动设备的内容之外，我们的大部分样式都在那里。

先谢谢大家了!

Answer 1

我认为如果将“First Christmas Personalized Ornament”文本放在 span 元素中并添加 style="display:block;"到跨度，它将被固定。

阿塔坎。