Question

我在Outlook 365（网络版）和Gmail（桌面版）方面存在一些显示问题。邮件客户端都不会识别valign代码。所有其他电子邮件客户端按预期显示。下面是如何显示对齐的屏幕截图。

下一个屏幕截图显示了Outlook 365（网络）和Gmail（桌面）的显示方式。注意文本链接如何驻留在td单元的中心而不是预期的底部。

本文底部提供了背景图片，表格设置和标题区域的当前代码。

（BTW ...... Litmus还显示对齐问题，但Dreamweaver按预期显示。所有主要浏览器和其他电子邮件客户端都按预期显示。）

如果有人可以查看下面粘贴的代码并查看我错过的内容，我们将不胜感激。我已经尝试了所有常规调整，似乎没有任何东西可以容纳Outlook 365和Gmail桌面。感谢大家的快速反应和专业知识。

亚历

<div style="background-color: #00adef;"><!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="https://BackgroundTileURLHere" color="#e9f8f8"/>
/v:background
<![endif]-->
<table style="width: 100%; height: 100%;" border="0" cellpadding="0" cellspacing="0"><tbody width="640px;">
<tbody>
<tr>
<td align="left" background="BackgroundTileURLHere" valign="top">
<table style="width: 100%;" background="BackgroundTileURLHere">
<tbody>
<tr>
<td>
<!-- HEADER -->
<table font-family:="Arial, helvetica, sans-serif" style="width: 640px;" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="6" style="width: 640px;"><img alt="EmailHeaderTopSpacer" src="EMailHeaderTopSpacingImageFileURLHere" style="display: block; width: 640px; height: 20px; border-style: none;" /></td>
</tr>
<tr>
<td style="width: 193px;"><a href="CompanyHomePageURLHere" target="_blank"><img alt="CompanyLogo" src="CompanygoFileURLHere" style="display: block; width: 193px; height: 58px; border-style: none;" /></a></td>
<td style="width: 65px;"><img alt="CompanyLogoBreathingSpaceImageFile" src="CompanyLogoBreathingSpaceImageFileURLHere" style="display: block; width: 65px; height: 58px; border-style: none;" /></td>
<td style="width: 102px;" valign="bottom"><p><a href="ClickDestinationURLHere" target="_blank" style="text-decoration: none;"><span style="font-family: arial,helvetica,sans-serif; color: #14552c; font-size: 14px; font-weight: bold; text-align: center;">Kelly Kettles</span></a></p></td>
<td style="width: 120px;" valign="bottom"><p style="text-align:center;"><a href="ClickDestinationURLHere" target="_blank" style="text-decoration: none;"><span style="font-family: arial,helvetica,sans-serif; color: #14552c; font-size: 14px; font-weight: bold; text-align: center;">Ultimate Kits</span></a></p></td>
<td style="width: 115px;" valign="bottom"><p style="text-align:center;"><a href="ClickDestinationURLHere" target="_blank" style="text-decoration: none;"><span style="font-family: arial,helvetica,sans-serif; color: #14552c; font-size: 14px; font-weight: bold; text-align: center;">Accessories</span></a></p></td>
<td style="width: 45px;" valign="bottom"><p style="text-align:right;"><a href="ClickDestinationURLHere" target="_blank" style="text-decoration: none;"><span style="font-family: arial,helvetica,sans-serif; color: #14552c; font-size: 14px; font-weight: bold; text-align: right !important;">Blog</span></a></p></td>
</tr>
<tr>
<td colspan="6" style="width: 640px;"><img alt="HeaderBottomSpaceImageFile" src="HeaderBottomSpaceImageFileURLHere" style="display: block; width: 640px; height: 10px;" /></td>
</tr>
</tbody>
</table>

Answer 1

使用valign="bottom"替换style="vertical-align: bottom"应根据此来源进行操作：https://www.campaignmonitor.com/css/

Outlook 365（Web）和Gmail（桌面）无法识别td单元格中的valign底部代码

1 个答案: