电子邮件模板不在 Outlook 中保持图像内联

Question

正在尝试让图标显示在 header 文本的右侧。无法使用 <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>

Answer 1

根据我上面的评论，最安全的方法是使用嵌套 table。这只是 HTML 标记，自己添加其他样式（边框折叠、宽度等）

<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>
    ...

电子邮件模板不在 Outlook 中保持图像内联

Email template not keeping image inline in Outlook

html

css

image

outlook

html-email