Outlook on Android (11) 图像大小爆炸式增长答案

【问题标题】：Outlook on Android (11) image size explodingOutlook on Android (11) 图像大小爆炸式增长
【发布时间】：2020-09-15 14:49:52
【问题描述】：

以前工作的模板现在在 Outlook for Android (11) 上表现出非常奇怪的行为。我们的标志图像出奇地巨大，并以各种奇怪的方式包裹起来。实际文件为 8 位、PNG、300x79。 Outlook 桌面和 OWA 看起来很好，iOS 邮件、Gmail 等也很好。我们的图像代码是这样的：

<table width="100%" role="presentation" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" border="0" style="max-width:640px;background:#ffffff !important">
  <tr>
    <td bgcolor="#ffffff" width="10">&nbsp;</td>
    <td bgcolor="#ffffff" style="padding-top:5px;">
    <!--[if mso]>
      <table width="50%"><tr><td>
        <img width="280" src="cid:logo" style="text-align: right; width: 280px; border: 0; text-decoration:none; vertical-align: baseline;" border="0" />
      </td></tr></table>
      <div style="display:none;">
    <![endif]-->
      <img style="max-width:300px !important;height:auto;" src="cid:logo" border="0" />
    <!--[if mso]>
      </div>
    <![endif]-->
   </td>
  </tr>
</table>

我们在这里看到的实际上是字母“A”的一部分。橙色是一个 10 像素高的橙色条，横穿我们的电子邮件顶部。

我已清除 Outlook 移动设备中的所有数据和缓存。没有不同。在我变得更疯狂之前，我是否在这段代码中遗漏了一些东西？甚至奇怪的是，如果我将模板更改为仅文本并且不包含图像（使用 contentid 内联显示），Android 上的 Outlook 仍会显示如下图像。

【问题讨论】：

无法重现问题，但不知道为什么图像上没有宽度？即<img style="width:100%;max-width:300px !important;height:auto;"...
它似乎是缩小的 CSS。我采用了完全相同的 CSS，未缩小它并且效果很好。

标签： android html outlook html-email

【解决方案1】：

原来它是缩小的 CSS。当我采用完全相同的 CSS，将其取消缩小并将其放在 head 部分时，Outlook 移动版按预期工作。换回缩小版，它又坏了。

【讨论】：