Outlook 中的 html 电子邮件显示错误答案

【问题标题】：Wrong display of html e-mail in OutlookOutlook 中的 html 电子邮件显示错误
【发布时间】：2019-06-07 15:46:21
【问题描述】：

我使用以下代码创建了一个 html 电子邮件：

<!DOCTYPE html>
<html style="margin:0px;padding:0px;">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
</head>
<body style="margin:0px;padding:0px;">

<div style="background-color:orange;max-width:600px;height:180px;margin-left:auto;margin-right:auto;">

<img src="http://placehold.jp/500x710.png" style="height:180px;width:127px;display:block;border:0;float:right;margin:0px;padding:0px;">

<p style="font-size:40px;padding-left:10px;margin-top:0px;padding-top:40px;">This is my important<br>html test</p>

</div>

</body>
</html>

我还用Outlook 2016 (Win 7) 测试了这段代码，得到了意想不到的结果。

在Outlook 2016 (Win 7) 上，html 呈现如下：

而不是像这样的预期：

这是一个已知的 Outlook 问题吗？我该如何解决？

使用 127x180 的图像结果相同，只是图像更小。

【问题讨论】：

标签： html css email outlook html-email

【解决方案1】：

<div> 在 Outlook 中存在问题。它并不能很好地使用它，最好避免它。
max-width 被 Outlook 忽略。
padding-top 被 Outlook 忽略。
Outlook 忽略样式表中的width 和height。请改用<img width="180" />。

这在每个电子邮件客户端都有效。这可能不是我编写电子邮件的方式，我宁愿将图像和文本放在他们自己的<td> 中以便更好地操作，但根据您的重要 html 测试，我想演示一种使事情正常运行的方法。

<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="600">
  <tr>
    <td valign="middle" style="padding: 20px; background-color:orange;">
      <img src="http://placehold.jp/500x710.png" width="127" height="180" align="right"   style="display:block;">
      <p style="font-size: 40px; padding-left: 10px; margin-top: 0px;">This is my important<br>html test</p>
    </td>
  </tr>
</table>

祝你好运。

【讨论】：

非常感谢您的回答。如果窗口小于 600 像素，则图像会被剪切。相反，整个表格应该变小并适合窗口宽度。我该怎么做？
@David 您可以将width 和max-width 添加到内联样式表中。就像我说的那样，Outlook 将忽略它们。或者，您可以将 @media 查询添加到 Outlook 也会忽略的样式表。