时间戳

首页 > 解决方案 > Outlook 7 在同一行对齐图像和文本

html - Outlook 7 在同一行对齐图像和文本

问题描述

在我的电子邮件模板中有以下 HTML 标记

<p>
    <a class="arrowlink" href="https://link" style="font-weight: normal; text-decoration: none; line-height: 22px; height: 26px; display: inline-block; vertical-align: middle; font-size: 18px; color:#5cc5ed;">
        <img src="/arrow_link.png" style="vertical-align:middle;max-width:20px !important; mso-line-height-rule: exactly; width: 20px; height:20px; margin-right:5px; !margin-top: 15px; mso-margin-top-alt:15px; !padding-top: 15px; border:0;" align="absbottom" width="22px" height="auto" class="img-arrow">
        <span style="display: inline-block; line-height: 22px; height: 22px; mso-line-height-rule: exactly;" class="link-text">My Link</span>
    </a>
</p>

我尝试将图像和跨度内容对齐在同一行，这将适用于大多数电子邮件客户端，但在 Outlook 中，图像和跨度内容未正确对齐。

在不使用任何类型的 Outlook 2007 表格的情况下，是否有任何解决方法

标签： htmlcssemailoutlook

解决方案

没有可靠的方法来确保所有电子邮件客户端的一致性，尤其是在边距和填充方面。你只需要找到一个你可以忍受的妥协。

根据我的经验，最好的办法是让它尽可能简单，并尽量减少你需要做的造型数量。

表格： 除非您有非常基本的设计，否则恐怕您必须为电子邮件使用表格 - 即使对于当前的现代电子邮件客户端，更不用说 Outlook 2007 :) 为电子邮件设计几乎违反了我们所知道的所有良好 HTML 开发实践（表，内联样式等）。

图像对齐：我的建议是更改图像本身以包含任何填充/边距，而不是尝试将其添加到 CSS 中，这可以由不同的电子邮件客户端以不同方式处理。

仅供参考：Outlook 2007 使用和支持：

  • Microsoft 于 2017 年终止了对 Outlook 2007 的支持。
  • 2015 年，大约 16% 的发送到 Outlook 的电子邮件是在 Outlook 2007 中打开的。
  • 这一比例在 2017 年（支持的最后一年）降至 10%。

由于支持于 2017 年 10 月结束，我预计现在用户数量会少得多。

虽然我不建议忽略它，但我会强调更流行的电子邮件客户端的设计，除非你知道你的大部分收件人都有

推荐阅读