我使用以下代码创建了一封 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)
我得到了意想不到的结果。
On Outlook 2016 (Win 7)
html 的渲染如下:
而不是像这样的预期:
这是一个已知的 Outlook 问题吗?我该如何修复它?
使用 127x180 的图像效果相同,只是图像较小。
-
<div>
Outlook 中存在问题。它实际上并不能很好地发挥作用,最好避免它。
-
max-width
被 Outlook 忽略。
-
padding-top
被 Outlook 忽略。
- Outlook 忽略
width
and 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>
祝你好运。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)