html - Outlook 365(网络版)和 Gmail(桌面版)无法识别 td 单元格中的 valign 底部代码

Question

我在使用 Outlook 365(网络版)和 Gmail(桌面版)时遇到一些显示问题。两个邮件客户端都不会识别 valign 代码。所有其他电子邮件客户端均按预期显示。下面是对齐应如何显示的屏幕截图。

Correct alignment of menu text links

下一个屏幕截图显示了 Outlook 365(网络)和 Gmail(桌面)的显示方式。请注意文本链接如何位于 td 单元格的中心而不是预期的底部。

enter image description here

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

(顺便说一句……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/