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

本文介绍了在Outlook中错误显示html电子邮件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用以下代码创建了html电子邮件:

I created an html e-mail with the following code:

<!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)测试了此代码，但得到了意外的结果.

I also tested this code with Outlook 2016 (Win 7) and I'm getting an unexpected result.

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

On Outlook 2016 (Win 7) the html gets rendered like this:

而不是像这样的预期:

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

Is this a known Outlook problem? How can I fix it?

使用127x180的图像结果相同，只是图像较小.

Using an image with 127x180 results to the same, only the image is smaller.

推荐答案

<div>在Outlook中是有问题的.它真的不能很好地工作，最好避免使用它.
max-width被Outlook忽略.
padding-top被Outlook忽略.
Outlook会忽略样式表中的width和height.请使用<img width="180" />.

<div> is problematic in Outlook. It doesn't really work well with it and it's best to avoid it.
max-width is ignored by Outlook.
padding-top is ignored by Outlook.
Outlook ignores width and height in a style sheet. Use <img width="180" /> instead.

这在每个电子邮件客户端上都一致地起作用.可能不是我编写电子邮件的方式，我宁愿将图像和文本放在自己的<td>中以便进行更好的操作，但是基于您的重要html测试，我想演示一种使事情正常进行的方法. /p>

This works consistently across every email client. It may not be the way I would code an email, I would rather put the image and text in their own <td> for better manipulation, but based on your important html test, I wanted to demonstrate a way to make things work.

<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电子邮件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！