如何修复营销邮件中表格内div与img的对齐错误

邮件客户端对float、div这类CSS特性的兼容性极差，尤其是Outlook等老式客户端，这是导致你布局错位的核心原因。邮件布局的标准方案是用表格替代块级元素做结构，以下是修复后的完整代码：

<tr>
    <td style="height:40px;background-color:#eceded">&nbsp;
    </td>
</tr>
<tr>
    <td align="center" width="100%" style="background-color:#eceded;padding:0;">
        <a style="text-decoration:none" href="https://seslink.sescrio.org.br/cl/POlcL/C99-/720b/Nr-qDmFVJdW/BN3W/EFG52VBKt2N/1/" target="_blank">
            <!-- 用嵌套表格实现左右布局 -->
            <table width="80%" border="0" cellpadding="0" cellspacing="0" style="border-radius:15px;overflow:hidden;">
                <tr>
                    <!-- 左侧图片列 -->
                    <td width="30%" style="padding:0;">
                        <img src="http://www.unifeso.edu.br/uploads/email-marketing/5fb9fd6d878c37f87e21a077b4dc6ad4.jpg" alt="" style="width:100%;display:block;">
                    </td>
                    <!-- 右侧内容列 -->
                    <td width="70%" style="background-color:#aef2b9;color:#6a6a6a;padding:20px;">
                        <h1 style="margin:0 0 10px 0;">Lorem ipsum</h1>
                        <p style="margin:0 0 15px 0;">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Commodi in enim iusto numquam architecto nisi voluptate saepe nam, aspernatur ullam corporis maxime nobis soluta sed ducimus accusantium quam dolore eum!</p>
                        <img src="https://www.unifeso.edu.br/email-news/images/btn_news.png" alt="" style="width:190px;display:block;">
                    </td>
                </tr>
            </table>
        </a>
    </td>
</tr>
<tr>
    <td style="height:40px;background-color:#eceded">&nbsp;
    </td>
</tr>

关键调整说明： #

• 用嵌套表格实现左右分栏，彻底避免float带来的兼容性问题
• 把圆角样式加在最外层表格上，通过overflow:hidden裁剪内部元素，保证圆角在所有客户端生效
• 移除固定的margin-left和width，改用表格列的百分比宽度控制布局，适配不同屏幕
• 给图片添加display:block，防止邮件客户端自动给图片加默认间距
• 给文本元素重置默认边距，避免不同客户端的样式差异

内容的提问来源于stack exchange，提问作者André Alves