在浏览器中测试时,我的内容看起来完全符合我的要求,但通过电子邮件运行它后,标题位于横幅下方而不是横幅上 - 就像它在浏览器中一样。
<tr>
<td style="background-color: #FBFBFB;">
<div style="position: relative; text-align: center; color: white;">
<img src="iphonebannerv3.png" width="600" height="" alt="Nielsen Header Banner" border="0" style="width: 100%; max-width: 600px; height: auto; background: #FBFBFB; font-family: open sans, sans-serif; font-size: 15px; line-height: 15px; color: #555555; margin: auto;" class="g-img">
<h1 style="margin: 0 0 0px 0; font-family: Open sans, sans-serif; font-size: 28px; text-align:center; line-height: 30px; color: #FFFFFF; font-weight: bold; position: absolute; top: 45%; left: 8%;">YOU'RE MISSING OUT<br> ON VOUCHERS</h1>
</div>
</td>
</tr>
最佳答案
编写 HTML 电子邮件模板可能很棘手。不要对 H1 进行绝对定位,而是尝试将 everything 设置为固定在表格中。例如,在您的 TD 中,我将从一张新 table 开始。例如:
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FBFBFB">
<tr>
<td align="center">
<table width="600px" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody>
<tr>
<td>
<img src="https://placehold.it/600x150" width="600" height="150" alt="Nielsen Header Banner" border="0" style="display: block; width: 600px; height: 150px;" class="g-img">
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="background: #00aeef; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody>
<tr>
<td> </td>
</tr>
<tr>
<td style="font-family: Arial, Verdana, sans-serif; font-size: 28px; text-align: center; line-height: 30px; color: #FFFFFF; font-weight: bold;"> YOU'RE MISSING OUT<br> ON VOUCHERS</td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
您可以在 CSS 中使用 Style 标签来组织您的样式,并使用像 https://inlinestyler.torchbox.com/ 这样的工具。在完成模板之前移动所有内联的 css。还有,
- 并不是每个人的客户端都安装了 Open Sans,
- 定义图片的宽度和高度。
- 图像不需要所有字体 CSS 样式。
- 使用表格设置所有内容以获得最佳的跨邮件客户端模板。
祝你好运!
关于在电子邮件客户端中测试时 HTML 内容发生变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52269265/