Mac版Outlook中HTML邮件签名图片被压扁变形问题

问题原因 #

Mac版Outlook采用WebKit渲染内核，和Windows版Outlook使用的Word渲染内核对HTML尺寸规则的解析逻辑存在差异，现有代码存在几处不兼容写法直接触发图片变形：

• 所有图片仅声明了宽度，未显式指定高度属性，Mac端会自动按父容器可用高度压缩无明确高度的图片
• 内层嵌套表格存在拼写错误：heigth="105" 为错误拼写，正确属性名是height，该错误导致表格高度声明完全失效，布局计算错乱
• 底部通栏Logo未设置任何尺寸参数，会在自适应单元格宽度时被强制拉伸
• 图片使用百分比单位的padding值，不同内核对百分比padding的计算基准不一致，会干扰图片尺寸的正常渲染
• 联系方式处的LinkedIn链接存在笔误，多写了一个h，会导致链接跳转失效

修复后完整代码 #

所有尺寸优先使用HTML原生width/height属性声明（Outlook对原生属性的识别优先级远高于CSS样式），同时在CSS中固定对应宽高，修正拼写错误，将百分比padding替换为固定像素值，补全所有图片的尺寸声明：

<table border="0" width="320" height="158" cellpadding="0" cellspacing="0">
    <tr>
        <td align="center" width="115">
            <!-- 头像区域 -->
            <img width="91" height="91" style="display:block;width: 91px;height:91px;padding-bottom: 4px;"
                src="https://espartadigital.com/wp-content/uploads/2022/05/Carlos.png" alt="Foto-Carlos">
        </td>
        <td width="205" align="left">
            <table border="0" cellpadding="0" cellspacing="0" width="205" height="105"
                style="color: #ee7601;font-family: 'Raleway', sans-serif; font-weight: bold;">
                <tr>
                    <td colspan="2" width="205" style="line-height: 14px">
                      <span style="font-size: 15px; font-weight: 900;" >Carlos Fabuel</span> <br>
                      <span  style="font-size: 12px;">SEO Account Manager</span>
                    </td>
                </tr>
                <tr style="line-height: 14px;">
                    <td align="left" width="20">
                        <!-- 电话图标 -->
                        <img width="10" height="10" style="display:block;padding-bottom: 4px;"
                            src="https://espartadigital.com/wp-content/uploads/2022/05/phone-call.png" alt="">
                    </td>
                    <td align="left" width="185" style="font-size: 10px;"><span> 960 64 98 57</span>
                    </td>
                </tr>
                <tr style="line-height: 14px;">
                    <td align="left" width="20">
                        <!-- LinkedIn图标 -->
                        <img width="10" height="10" style="display:block;padding-bottom: 4px;"
                            src="https://espartadigital.com/wp-content/uploads/2022/05/linkedin.png" alt="">
                    </td>
                    <td align="left" width="185" style="font-size: 10px;"> <a
                            style="text-decoration: none !important; color: #ee7601;"
                            href="https://www.linkedin.com/in/carlosfabuel/">Linkedin/CarlosFabuel/</a> 
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td colspan="2" width="320">
            <!-- 底部通栏Logo -->
            <img width="320" height="53" style="display:block;width:320px;height:53px;" src="https://espartadigital.com/wp-content/uploads/2022/05/Barra-con-logo-1.png" alt="Eslogan-logo">
        </td>
    </tr>
</table>

渲染效果参考 #

• 异常显示效果：
• 正常预期效果：

兼容注意事项 #

编写跨Outlook版本的邮件签名时遵循以下规则，可避免90%以上的渲染异常：

• 所有固定尺寸的元素、图片必须同时声明HTML原生width/height属性和对应CSS宽高，不要只写其中一种
• 尽量使用固定像素值定义尺寸、边距，避免使用百分比、em等相对单位
• 所有图片添加display:block样式，消除图片默认的底部行内间隙
• 不要使用拼写错误的标签属性，所有属性写完后做拼写校验

内容的提问来源于stack exchange，提问作者Juanma Perez