在电子邮件客户端中测试时，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，请尝试设置表格固定的所有内容。例如，在您的TD中，我将从一个新表开始。例如：

<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中使用样式标签来保持样式井井有条，并在完成模板之前使用https://inlinestyler.torchbox.com/之类的工具将所有CSS内联移动。另外，

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

祝你好运！