【问题标题】:Email template not keeping image inline in Outlook电子邮件模板未在 Outlook 中保持图像内联
【发布时间】:2025-11-24 08:10:02
【问题描述】:

试图让图标出现在标题文本的右侧。不能使用<li>。我的解决方案适用于除 Outlook 电子邮件客户端之外的任何地方。任何帮助表示赞赏。

期望的输出:

Outlook 中的实际输出:

代码:

<tr>
    <td class="padding content"
        style="padding-top:0;padding-right:25px;padding-bottom:20px;padding-left:25px;width:100%;text-align:left;font-size:15px;">

        <img src="https://i.ibb.co/MCXhwJB/authenticator-app-icon-large.png" width="50" height="50" alt=""style="border-width:0;width:100%;max-width:50px;max-height:50;padding-right:10px;padding-top:20px;display:inline;">
        <p style="font-size:18px;line-height: 23px;min-width:600px; display: inline;"><strong>Multi-Factor Authenticator (MFA)</strong></p>
        <p style="font-size:18px;line-height: 23px;min-width:600px;">The two-factor Authenticator application for Microsoft applications (Outlook, Teams, Word, etc.) will become required when working off-site to comply with our security policies.</p>
        <p style="font-size:18px;line-height: 23px;min-width:600px;"> The rollout will be <strong>staged throughout several weeks, going department by department.</strong> You will receive a reminder email <strong>3-4 days before</strong> the MFA application becomes required for your account.</p> 
        <p style="font-size:18px;line-height: 23px;min-width:600px;">See <strong>instructions below</strong> for install and setup instructions for the MFA. If you already have the MFA app install and successfully setup <strong>no further steps are required.</strong></p>
        
        <img src="https://i.ibb.co/64HcKjs/rotation-lock.png" width="50" height="50" alt=""style="border-width:0;width:100%;max-width:50px;max-height:50;padding-right:10px;display:inline;">
        <p style="font-size:18px;line-height: 23px;min-width:600px; display: inline;"><strong>Self-Service Password Reset/Recovery</strong></p>
        <p style="font-size:18px;line-height: 23px;min-width:600px;">With Office 365, it is now possible to register your Halton Healthcare with a personal email address to allow you to <strong>result or recover your Halton email account on your own</strong> without having to call or email service desk for assistance. See <strong>information below for registration instructions</strong>.</p>
       
        <img src="https://i.ibb.co/kxsY2M1/defender.jpg" width="50" height="50" alt=""style="border-width:0;width:100%;max-width:50px;max-height:50;padding-right:20px;">
        <p style="font-size:18px;line-height: 23px;min-width:600px; display: inline;"><strong>Safe Links</strong></p>
        <p style="font-size:18px;line-height: 23px;min-width:600px;">Thanks to Office 365 security enhancements, we are now able to deploy Safe Links. External links within emails will now be automatically checked against known malicious links and prevent a staff member from clicking into it. For more information <strong>see below</strong>.</p>
        
    </td>
</tr>

【问题讨论】:

  • 在所有客户端中最安全的方法是在td.content.padding 内制作2-col 表。

标签: html css image outlook html-email


【解决方案1】:

由于我上面的评论,最安全的方法是使用嵌套表。只是 HTML 标记,自己添加其他样式(border-collapse、widhts 等)

<tr>
    <td class="padding content"
        style="padding-top:0;padding-right:25px;padding-bottom:20px;padding-left:25px;width:100%;text-align:left;font-size:15px;">

        <table>
            <tr>
                <td width="80">
                    <img src="https://i.ibb.co/MCXhwJB/authenticator-app-icon-large.png" width="50" height="50" alt=""style="border-width:0;width:100%;max-width:50px;max-height:50;padding-right:10px;padding-top:20px;display:inline;">
                </td>
                <td width="...">
                    <p style="font-size:18px;line-height: 23px;min-width:600px; display: inline;"><strong>Multi-Factor Authenticator (MFA)</strong></p>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <p style="font-size:18px;line-height: 23px;min-width:600px;">The two-factor Authenticator application for Microsoft applications (Outlook, Teams, Word, etc.) will become required when working off-site to comply with our security policies.</p>
                    <p style="font-size:18px;line-height: 23px;min-width:600px;"> The rollout will be <strong>staged throughout several weeks, going department by department.</strong> You will receive a reminder email <strong>3-4 days before</strong> the MFA application becomes required for your account.</p> 
                    <p style="font-size:18px;line-height: 23px;min-width:600px;">See <strong>instructions below</strong> for install and setup instructions for the MFA. If you already have the MFA app install and successfully setup <strong>no further steps are required.</strong></p>
                </td>
            </tr>
            ...
        </table>
    ...

【讨论】:

    最近更新 更多