我正在尝试发送电子邮件时事通讯,但 outlook 上的填充都是错误的。这是我的代码:
<div style="height: 600px; overflow:hidden;">
<table style="width: 520px;" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody>
<tr>
<td width="500">
<table style="width: 250px;" cellspacing="0" cellpadding="0" border="0" align="left">
<tbody>
<tr>
<td>
<p style="font-family: Helvetica Neue, Arial; font-size: 12px; line-height: 1.5; color: #cccccc; margin: 0px;"><i>bla bla | adadadsd</i></p>
</td>
</tr>
<tr>
<td><img createnew="true" src="https://multimedia.getresponse.com/getresponse-zMTNQ/photos/563de7a4-ca7d-462a-88be-1cd31ef21fc4.jpg" style="padding-bottom:10px;" width="250" height="250"></td>
</tr>
<tr>
<td>
<h3 style="font-family: Helvetica Neue, Arial; font-size: 18px; line-height: 1.5; color: #194845; margin: 0px; mso-line-height-rule:exactly;">adad is the way to go!</h3>
</td>
</tr>
<tr>
<td>
<p style="font-family: Helvetica Neue, Arial; font-size: 12px; color: #c69a5b; margin: 0px;">................</p>
</td>
</tr>
<tr>
<td height="27"><img createnew="true" src="http://newsletter.etiketa-dev.xyz/nl-27/linetitle.png" width="53" height="6"></td>
</tr>
<tr>
<td valign="top" height="139">
<p style="font-family: Helvetica Neue, Arial; font-size: 14px; line-height: 1.5; color: #222222; margin: 0px;">ajksdhajkh ajhdkajhd hdkahdkahdkah hdkahdkahdkja adajhdakjdkahd asdadhkad ahdkahdkadhkadha Obradovic. Uadd has been certified adad APP, and is ready to implement best practice on all 3244 projects.
</p>
</td>
</tr>
<tr>
<td>
<a href="https://adad.co/2019/03/29/well-is-the-way-to-go/" target="_blank"><img createnew="true" src="http://newsletter.etiketa-dev.xyz/nl-27/cta1.jpeg" style="padding-top:6%;" width="250" height="60"></a>
</td>
</tr>
</tbody>
</table>
<table style="width: 250px;" cellpadding="0" border="0" align="right">
<tbody>
<tr>
<td>
<p style="font-family: Helvetica Neue, Arial; font-size: 12px; line-height: 1.5; color: #cccccc; margin: 0px; text-decoration:none; margin:0;"><i>adad | asda.org</i></p>
</td>
</tr>
<tr>
<td><img createnew="true" src="https://multimedia.getresponse.com/getresponse-zMTNQ/photos/a6042f20-f80a-4826-830b-eb482d49280c.jpg" width="250" height="250"></td>
</tr>
<tr>
<td>
<h3 style="font-family: Helvetica Neue, Arial; font-size: 18px; line-height: 1.5; color: #194845; margin: 0px;mso-line-height-rule:exactly;">adadd in Eastern Europe</h3>
</td>
</tr>
<tr>
<td>
<p style="font-family: Helvetica Neue, Arial; font-size: 12px; color: #c69a5b; margin: 0px;">adad leads in asdasdad the asdad adada!</p>
</td>
</tr>
<tr>
<td height="27"><img createnew="true" src="http://newsletter.etiketa-dev.xyz/nl-27/linetitle.png" width="53" height="6"></td>
</tr>
<tr>
<td valign="top" height="139">
<p style="font-family: Helvetica Neue, Arial; font-size: 14px; line-height: 1.5; color: #222222; margin: 0px;">jahdajkd adwrkjq akjdadka ajdajhd akjdkhr wrwr wrwrakn kajdalkjd jakljdaljd akljdjeor kadjlqldm lajkdjojd akljd jdks ks akdj of 2019!</p>
</td>
</tr>
<tr>
<td>
<a href="https://asdad.co/2019/03/29/ctbuh-premiers-in-eastern-europe/" target="_blank"><img createnew="true" src="http://newsletter.etiketa-dev.xyz/nl-27/cta1.jpeg" style="padding-top:4%;" width="250" height="60"></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
右边的按钮比左边的按钮高。你如何让他们在前景上保持一致?
我试过用填充替换边距,但仍然没有锁定。我也使用 % 而不是 px。
在浏览器上看也不错。
最佳答案
电子邮件开发不是 html 开发。您的 Web 浏览器支持一组不同于 IOS、Gmail、Outlook 等电子邮件客户端的功能,即使您通过该 Web 浏览器查看电子邮件也是如此。
Outlook 对填充的支持参差不齐。
padding-top
根本不适用于 Outlook 2013-2019。将内边距从图像移到父 td
中。
<tr>
<td style="padding: 10px 0 0 0;">
<a href="https://adad.co/2019/03/29/well-is-the-way-to-go/" target="_blank">
<img createnew="true" src="http://newsletter.etiketa-dev.xyz/nl-27/cta1.jpeg" style="padding-top:6%;" width="250" height="60"></a>
</td>
</tr>
此外,Outlook 对 % 值的支持参差不齐。我改用 10px 的内边距。
最后,Outlook 2007-2019 永远不会支持 Helvetica Neue,因为它是一种网络字体,并且对名称中带有空格的网络字体的支持参差不齐。 Arial 不是一个好的后备。考虑使用 Trebuchet MS 之类的东西。
祝你好运。
关于html - 电子邮件模板填充未对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55432543/