在Outlook中错误显示html电子邮件

Question

我用以下代码创建了一个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的图像可获得相同的效果，只是图像较小。

Answer 1

<div>在Outlook中是有问题的。 它真的不能很好地工作，最好避免使用它。
Outlook将忽略max-width 。
Outlook将忽略padding-top 。
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>

祝好运。

在Outlook中错误显示html电子邮件

问题描述

1 个解决方案

解决方案1
1 2019-01-13 19:27:00

在Outlook中错误显示html电子邮件

问题描述

1 个解决方案

解决方案1 1 2019-01-13 19:27:00

解决方案1
1 2019-01-13 19:27:00