gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 00:57:44 27 4
gpt4 key购买 nike

我使用以下代码创建了一个 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 呈现如下:

enter image description here

而不是像这样的预期:

enter image description here

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

使用 127x180 的图像结果相同,只是图像较小。

最佳答案

  • <div>在 Outlook 中是有问题的。它并不能很好地与它一起工作,最好避免它。
  • max-width被 Outlook 忽略。
  • padding-top被 Outlook 忽略。
  • Outlook 忽略 widthheight在样式表中。使用 <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>

祝你好运。

关于html - 在 Outlook 中错误显示 html 电子邮件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54168230/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com