我们的问题很简单,我们有一个块,里面有内容,标题和按钮,我们使用了一个块,然后将我们的 gif 图像设置为背景,但这在 Outlook 应用程序中无常工作,因为背景中的图像不工作,没有动画。
所以我不得不跳转到另一个解决方案,我将使用一个 div,里面我会把我的 img 标签(它的工作原理),并设置该 div 的高度为 0px,然后在它下面我添加我的表的内容,表的高度将具有与 img 高度相同的高度,以及宽度
<div style="height: 1px;">
<table width="600" height="0">
<tr>
<td height="0">
<img width="600" height="698"
src="https://image.contact.piaget.com/lib/fe39117175640479711c70/m/1/3e17cd3e-a069-4962-a0a6-dd78b9a78589.gif">
</td>
</tr>
</table>
</div>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="w100v" width="600" style="width: 600px">
<tr>
<td bgcolor="#f2fcfe" width="600" height="696" valign="top" class="bg_BLOCK16">
<div>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="w92v5" width="600"
style="width: 600px">
<tr>
<td align="center" valign="top" class="padt84 fs30"
style="padding-top:285px;color:#FFFFFF;font-size:25px;text-transform: uppercase;font-family: Times, 'Times New Roman', 'serif';mso-line-height-rule:exactly;line-height:30px">
<a href="https://www.piaget.com/lp/holiday-season" target="_blank"
style="color:#FFFFFF;text-decoration: none"><strong>Let the Piaget magic <span
class="db"></span>begins</strong></a>
</td>
</tr>
<tr>
<td align="center" valign="top"
style="padding-top:15px;padding-bottom:15px;color:#FFFFFF;font-size:12px;font-family:Arial, Helvetica, sans-serif;mso-line-height-rule:exactly;line-height:22px;"
class="fs36 pad1v45"><a href="https://www.piaget.com/lp/holiday-season" target="_blank"
style="color:#FFFFFF;text-decoration: none"><b>Cheerful times with loved ones, shared joy,
timeless gifts.</b>
</a></td>
</tr>
<tr>
<td height="36" class="h_cta" align="center">
<table bgcolor="#FFFFFF" align="center" border="0" cellpadding="0" cellspacing="0"
style="border:1px solid #002a3a;border-radius: 2px;border-collapse: separate;min-width: 130px;"
class="link-over-bleu">
<tr>
<td bgcolor="#FFFFFF" width="20" class="w6v25" style="width:20px;"></td>
<td height="34" class="h_cta"
style="color:#002a3a;font-size:11px;text-align:center;font-family:Arial, Helvetica, sans-serif;font-weight:bold;height: 34px;text-transform: uppercase">
<a href="https://www.piaget.com/lp/holiday-season"
style="text-decoration:none;color:#002a3a;" target="_blank">DISCOVER MORE</a>
</td>
<td bgcolor="#FFFFFF" width="20" class="w6v25" style="width:20px;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="600" height="30"></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
并尝试了这个:
</div>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="w100v" width="600" style="width: 600px">
<tr>
<td bgcolor="#f2fcfe" width="600" height="696" valign="top" class="bg_BLOCK16">
<div>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="w92v5" width="600"
style="width: 600px">
<tr>
<td align="center" valign="top" class="padt84 fs30"
style="padding-top:285px;color:#FFFFFF;font-size:25px;text-transform: uppercase;font-family: Times, 'Times New Roman', 'serif';mso-line-height-rule:exactly;line-height:30px">
<a href="https://www.piaget.com/lp/holiday-season" target="_blank"
style="color:#FFFFFF;text-decoration: none"><strong>Let the Piaget magic <span
class="db"></span>begins</strong></a>
</td>
</tr>
<tr>
<td align="center" valign="top"
style="padding-top:15px;padding-bottom:15px;color:#FFFFFF;font-size:12px;font-family:Arial, Helvetica, sans-serif;mso-line-height-rule:exactly;line-height:22px;"
class="fs36 pad1v45"><a href="https://www.piaget.com/lp/holiday-season" target="_blank"
style="color:#FFFFFF;text-decoration: none"><b>Cheerful times with loved ones, shared joy,
timeless gifts.</b>
</a></td>
</tr>
<tr>
<td height="36" class="h_cta" align="center">
<table bgcolor="#FFFFFF" align="center" border="0" cellpadding="0" cellspacing="0"
style="border:1px solid #002a3a;border-radius: 2px;border-collapse: separate;min-width: 130px;"
class="link-over-bleu">
<tr>
<td bgcolor="#FFFFFF" width="20" class="w6v25" style="width:20px;"></td>
<td height="34" class="h_cta"
style="color:#002a3a;font-size:11px;text-align:center;font-family:Arial, Helvetica, sans-serif;font-weight:bold;height: 34px;text-transform: uppercase">
<a href="https://www.piaget.com/lp/holiday-season"
style="text-decoration:none;color:#002a3a;" target="_blank">DISCOVER MORE</a>
</td>
<td bgcolor="#FFFFFF" width="20" class="w6v25" style="width:20px;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="600" height="30"></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
它在 Outlook Web 版本和 gmail 上也做得很好,而在 Outlook 桌面应用程序中,它不是,显示 gif 并在其下方显示内容块
像这样
网络版:(看起来很完美,动画背景)
Outlook Desk 应用程序:(坏)
任何帮助将不胜感激。
本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处
评论列表(2条)