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中是有问题的。它真的不能很好地工作，最好避免使用它。
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>

祝你好运。

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

1 个答案: