Outlook桌面端HTML邮件头图未加载时占位符过大兼容问题

Outlook桌面端采用Word作为邮件渲染内核，和Web端、移动端的浏览器内核渲染逻辑存在明显差异，该占位图尺寸异常由两个核心问题导致：

1. HTML原生width/height属性值带了px单位：Word内核仅识别无单位的纯数字像素声明，带单位的属性值会被直接忽略，之前给多个元素设置height不生效就是这个原因。
2. 图片设置了width:100%的百分比宽度：图片未加载时，Word内核不会参考父容器宽度计算百分比值，会用缺失图片的默认占位宽度撑开容器，同时最外层table上同时写了height="250px"和内联样式height:110px，属性冲突也会干扰尺寸计算。

按以下规则调整代码即可解决兼容问题：

• 所有HTML原生width/height属性全部删除单位，仅保留纯数字值
• 统一所有层级的高度声明，删除同元素上冲突的height属性
• 给图片、链接标签添加display:block声明，消除行内元素默认间隙对尺寸的影响
• 给承载图片的单元格添加overflow:hidden，避免未加载的图片内容撑破容器
• 给图片设置匹配容器尺寸的字体大小、行高，避免alt文本把占位框撑大

修复后的完整代码如下：

<table id="header" width="100%" height="110" cellpadding="5" cellspacing="0" style="width:100%;height:110px;border-collapse:collapse;">
    <tr>
        <td align="left" height="110" style="position:relative;height:110px;background-color:#040C2C;overflow:hidden;">
            <a href="{$baseUrl}/{$lng}" style="display:block;height:110px;">
                <img style="display:block;width:100%;height:110px;font-size:12px;line-height:14px;color:#ffffff;" height="110" width="100%" src="{$baseUrl}{$SkinPath}/images/header_receipt.png" alt="header">
            </a>
        </td>
    </tr>
    <tr>
        <td colspan="2" style="border-bottom:1px solid #000000;padding:0; font-size: 0px; line-height: 0;"></td>
    </tr>
    <tr>
        <td colspan="2">
            <xsl:value-of select="aspdnsf:ReceiptTopic('ReceiptHeader', $OrderNumber)" disable-output-escaping="yes" />
        </td>
    </tr>
</table>

调整后即使Outlook桌面端拦截图片不自动加载，占位符也会保持110px的固定高度，不会出现尺寸异常。

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