在电子邮件客户端中测试时 HTML 内容发生变化

Question

在浏览器中测试时，我的内容看起来完全符合我的要求，但通过电子邮件运行它后，标题位于横幅下方而不是横幅上 - 就像它在浏览器中一样。

<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>

Answer 1

编写 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>&nbsp;</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>&nbsp;</td>
						 </tr> 
					 </tbody>
				   </table>
				</td>
			</tr>
		  </tbody>
		</table>	

		</td>
	</tr>
</table>

您可以在 CSS 中使用 Style 标签来组织您的样式，并使用像 https://inlinestyler.torchbox.com/ 这样的工具。在完成模板之前移动所有内联的 css。还有，

• 并不是每个人的客户端都安装了 Open Sans，
• 定义图片的宽度和高度。
• 图像不需要所有字体 CSS 样式。
• 使用表格设置所有内容以获得最佳的跨邮件客户端模板。

祝你好运!