html - Outlook 使用 MsoNormal 转换 HTML 代码并更改图像大小

Question

我们有一个应用程序可以基于自定义代码使用 Outlook 2013 打开新电子邮件。代码是

<img width="298px" height="28px" src="https://www.ahd.de/sites/default/files/logo_0.gif"/>

但 Outlook 打开电子邮件时显示以下内容:

<p class=MsoNormal><span style='font-size:10.0pt;font-family:"Arial",sans-serif;
mso-fareast-font-family:"Times New Roman";color:#6E6E6E;mso-no-proof:yes'><img
width=1024 height=768 id="_x0000_i1025"
src="https://www.ahd.de/sites/default/files/logo_0.gif"
alt="ahd your business. (Logo)"></span><span style='font-size:10.0pt;
font-family:"Arial",sans-serif;mso-fareast-font-family:"Times New Roman";
color:#6E6E6E'>

有什么办法解决这个问题吗？邮件中的图像比例严重失调。

注意:有趣的是，当我关闭 Outlook 窗口并通过我们的应用程序重新打开它时，代码仍然更改，但宽度和高度正确!

感谢您的帮助!

Answer 1

每次我们为电子邮件模板编写代码时，我们都应该始终遵循内联CSS，如果我们想使用图像，那么我们必须遵循以这种特殊方式(即 OP 案例):

<img alt="your alt text" border="0" height="28" src="https://www.ahd.de/sites/default/files/logo_0.gif" style="width: 298px; height:28px;line-height: 100%;outline: none;text-decoration: none;display: inline;margin: 0px;border: 0;" width="298" />

这背后的主要原因是:

• 始终提供图片标签的 alt 文本
• 始终将 border 设置为零，以避免大多数邮件客户端在您的图片周围放置不必要的边框
• 最重要的是，始终以两种方式**修复图像的高度和宽度，即使用内联 CSS 作为以及使用图像标记 attributes 将图像覆盖区域限制在所有平台上的实际尺寸。

希望这会让您清楚。