我正在构建一个HTML邮件，其中应该有一个顶部有数字的图像。到目前为止，我已经添加了一个带有嵌套表的td背景图像来定位文本。它在大多数电子邮件客户端中看起来都很好，除了…Outlook。Outlook将文本渲染到顶部(Outlook 2003(-过高(Outlook 2007及以上(
示例：示例图像
我的代码是：
<table width="100%" height="280" border="0" cellspacing="0" cellpadding="0"> <tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#ffffff" valign="middle">
<div>
<table width="100%" border="0" cellspacing="0" cellpadding="0"
align="center">
<tr>
<td background="https://i.ibb.co/1ztK68Q/banner2.jpg"
bgcolor="#ffffff" valign="middle" height="280" class="bg"
style="background-size:cover !important; -webkit-background-size:cover !important; background-repeat:none;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:680px; height: 360px">
<v:fill type="frame" src="https://i.ibb.co/1ztK68Q/banner2.jpg" color="#0a4a5e" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table width="100%" border="0" cellspacing="0"
cellpadding="0" align="center">
<tr>
<td>
<table width="100%" height="280" border="0"
cellspacing="0" cellpadding="0"
align="center" valign="middle">
<tr>
<td class="h1 m-h1 center pb25"
style="color:#ffffff; font-family:'Encode Sans', Arial,sans-serif; font-size:28px; font-weight:800; line-height:46px; text-align:center; vertical-align: middle;">
<a href="#" style="font-family:'Poppins', Arial,sans-serif; font-size:14px;line-height:17px; text-align:left; color:#000000; font-weight:700; text-decoration:none;"><img src="https://i.ibb.co/LgTBmqp/play.png"
width="64" height="64"
border="0" alt="" /></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</td> </tr> </table>
请参阅Outlook输出图像：请参阅Outlook Output图像
尝试将插图从<v:textbox inset="0,0,0,0">更改为<v:textbox inset="0,140px,0,0">-根据您的设置方式，这应该像margin一样工作(除了他们混淆了哪个是哪个-第二个值是插图顶部(。
您还需要将Outlook条件中的值更改为pt而不是px。要转换，请乘以0.75(尽管您的起始值太高——看起来像是为600像素的总宽度设计的，所以从那里开始(。
我可能删除了一张多余的桌子，但除此之外，我认为这是唯一的改变。
这很好用：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="telephone=no"><!-- Disable telephone linking in iOS -->
<title></title>
</head>
<body style="margin: 0px; padding: 0px; min-width: 100%;">
<div id="wrapper"><center style="width: 100%; table-layout: fixed; -ms-text-size-adjust: 100%; background-color: rgb(236, 81, 37); -webkit-text-size-adjust: 100%;"><!--[if (gte mso 9)|(IE)]><table width="100%" align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;" bgcolor="#ec5125" ><tr><td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;" ><![endif]-->
<div class="webkit" style="max-width: 600px;"><!--[if (gte mso 9)|(IE)]>
<table role="presentation" width="600" align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family: Arial, sans-serif;color:#333333;" >
<tr>
<td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;" >
<![endif]-->
<table align="center" style="font-family:Arial, sans-serif;color:#333333;font-size:16px;margin:0 auto;width:100%;max-width:600px;" cellpadding="0" cellspacing="0" role="presentation">
<tbody>
<tr>
<td valign="middle" bgcolor="#ffffff">
<div>
<table width="100%" align="center" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="600" height="280" class="bg" background="https://i.ibb.co/1ztK68Q/banner2.jpg" valign="middle" style="background-size: cover; -webkit-background-size: cover;width:100%;height:auto;" bgcolor="#ffffff"><!--[if gte mso 9]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:450pt;height:210pt"><v:fill type="frame" src="https://i.ibb.co/1ztK68Q/banner2.jpg" color="#0a4a5e" /><v:textbox inset="0,140px,0,0"><![endif]-->
<div>
<table width="100%" height="280" align="center" border="0" cellspacing="0" cellpadding="0" valign="middle">
<tbody>
<tr>
<td class="h1 m-h1 center pb25" style='text-align: center; color: rgb(255, 255, 255); line-height: 46px; font-family: "Encode Sans", Arial,sans-serif; font-size: 28px; font-weight: 800; vertical-align: middle;'><a style='text-align: left; color: rgb(0, 0, 0); line-height: 17px; font-family: "Poppins", Arial,sans-serif; font-size: 14px; font-weight: 700; text-decoration: none;' href="#"><img width="64" height="64" alt="" src="https://i.ibb.co/LgTBmqp/play.png" border="0"></a></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if gte mso 9]></v:textbox></v:rect><![endif]--></td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--><!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--></div>
</center></div>
</body>
</html>