HTML 签名仅在 Outlook 中调整某些图像的大小答案

【问题标题】：HTML signature is resizing only some images in OutlookHTML 签名仅在 Outlook 中调整某些图像的大小
【发布时间】：2016-07-28 21:06:39
【问题描述】：

我用 HTML 制作了一个电子邮件签名，似乎遵循大多数准则（表格、内联样式等），并且在大多数客户端上看起来都不错。但是，它在 Outlook 上看起来一定很奇怪，因为在收到 Outlook 的回复后，它是这样返回给我的电子邮件客户端的：

徽标非常好，但社交徽标得到了真正的缩放。这 code is on fiddle，但图片的代码如下所示：

<td valign="middle" style="padding: 0px 8px 0px 0px; border: 0px; outline: none;">
  <div style="margin: 0px; padding: 0px; border: 0px; outline: none; float: left;">
    <img width="110" height="60" src="https://i.imgur.com/FjK5XfG.png" style="border: none; vertical-align: middle;">
  </div>

<span>
  <span>
    <a href="https://www.facebook.com/ChemProChemistryTutor/" target="_blank" style="color: rgb(0, 0, 0); text-decoration: none; outline: none; border: none; font-size: 11px; font-family: arial; background: transparent; display: inline-block;width: 7px;height: 15px;margin-right: 15px;">
      <img src="http://i.imgur.com/zrHJLme.png" width="7px" height="15px">
    </a>
    <a href="https://twitter.com/101educ" target="_blank" style="color: rgb(0, 0, 0); text-decoration: none; outline: none; border: none; font-size: 11px; font-family: arial; background: transparent; display: inline-block;width: 16px;height: 13.5px;margin-right: 15px;">
      <img src="http://i.imgur.com/psyZ0A1.png" width="16px" height="13.5px">
    </a>
    <a href="https://www.linkedin.com/in/weinbergjb" target="_blank" style="display: inline-block;width: 15px;height: 15px;">
      <img src="http://i.imgur.com/ZyAuqXx.png" width="15px" height="15px">
    </a>              
  </span>
</span>

【问题讨论】：

我并不完全肯定，但我相信 Outlook 会缩放所有图像，除非它们是 .GIF 格式。尝试放置 .gif 图像而不是 PNG。
@Aziz - 我绝对可以尝试，但所有文件都是 .png，包括未缩放的徽标。
嗯...我正在查看您的代码，所有img 标签都具有不带px 单位后缀的高度/宽度属性，请尝试不带px 并且只使用数字，可能解决您的问题。
看来已经做到了！我还没有看到 HTML 签名再次搞砸了。 +1 @Aziz！
stackoverflow.com/a/36485709/11166149 酷！谢谢费尔南多·厄本。这对我有用。

标签： html css email outlook

【解决方案1】：

当您将px 单元添加到值时，Outlook（可能还有其他应用程序）似乎忽略了height 和width 属性。规范对此并没有 100% 明确，但是，默认情况下整数值被视为像素，您可以为百分比值添加 % 后缀。

根据规范，该值必须是非负整数，并且没有提及添加px后缀的要求：

img、iframe、embed、object、video、并且，当它们的 type 属性处于 Image Button 状态时，输入可以指定元素以给出视觉内容的尺寸元素的（宽度和高度分别相对于输出介质的标称方向），以 CSS 像素为单位。这属性（如果指定）必须具有有效的非负值整数。

进一步阅读：

总之，有效的代码应该是：

<img src="url" width="7" height="15">

【讨论】：

我搜索了一个小时，是的，这对我也有用。太感谢了！很抱歉挖掘了这个有 5 年历史的线程。
我不知道微软产品遵循任何规范。

【解决方案2】：

以响应模式将 HTML 模板发送到 Outlook 和 Gmail 时，我遇到了同样的问题。 CSS 的这些组件总是会出现问题，Outlook 将如何读取您的样式。因此，此时，您可以将所有样式保存在 HTML 代码的顶部，然后在您的标签中继承。然后，您可以访问此页面：

http://templates.mailchimp.com/resources/inline-css/

这个页面拯救了我并帮助我解决了这个问题，因为您的所有代码都将处于 Iliner 模式，但同时您的样式代码也将位于 Google 的 HTML 代码的顶部。据我所知，Outlook 并不总是读取 HTML 标记中的样式。问候。

【讨论】：