mso-line-height 和 mso-text-raise 在 Outlook 2013 中不起作用？
mso-line-height and mso-text-raise not working in Outlook 2013?
我有一个包含 3 列的页脚，它们都严格嵌套在 HTML 电子邮件模板的基于 table 的布局中。我正在尝试修复页脚，其中第三列的行高与前两列的顶部基线不匹配。
我一直在做研究，看看是否有解决这个问题的方法，并尝试了 mso-line-height-rule:exactly; mso-text-raise:44px; 的变体到声明 line-height 的最后一列，但它似乎没有有任何影响。
您可以在下图中看到，文本在最后一列向下移动，并且文本间隔有点不同于在电子邮件中正确呈现的第二个图像。
Outlook 2013（在 Amazon Workspace - Windows 7 Pro 中）：
Outlook 2011 Mac:
页脚代码：
<!-- Footer -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td class="content-spacing" style="font-size:0pt; line-height:0pt; text-align:left" width="1"></td>
<td align="center">
<table width="650" border="0" cellspacing="0" cellpadding="0" class="mobile-shell">
<tr>
<td class="td" style="width:650px; min-width:650px; font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal; Margin:0">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"><tr><td height="25" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td></tr></table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<!-- Column 1 -->
<th class="column-top" style="font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal; vertical-align:top; Margin:0" width="150">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div class="img" style="font-size:0pt; line-height:0pt; text-align:left"><image src="https://www.designevo.com/res/templates/thumb_small/black-and-yellow-basketball.png" border="0" width="120" height="120" alt="Healthy Moms. Strong Babies." /></div></td>
</tr>
</table>
</th>
<!-- END Column 1 -->
<!-- Column -->
<th class="column" style="font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal; Margin:0" width="20"><div style="font-size:0pt; line-height:0pt;" class="mobile-br-20"></div></th>
<!-- END Column -->
<!-- Column 2 -->
<th class="column-top" style="font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal; vertical-align:top; Margin:0" width="150">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<!-- Button -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left">
<table border="0" cellspacing="0" cellpadding="0" bgcolor="blue" style="border-radius: 0;">
<tr>
<td class="img" style="font-size:0pt; line-height:0pt; text-align:left" width="18"></td>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"><tr><td height="10" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td></tr></table>
<div class="text-button" style="color:#ffffff; font-family:Arial,sans-serif; font-size:19px; line-height:18px; text-align:center; text-transform:uppercase">
<a href="#" target="_blank" class="link-white" style="color:#ffffff; text-decoration:none"><span class="link-white" style="color:#ffffff; text-decoration:none; font-weight:bolder;">BUTTON</span></a>
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"><tr><td height="10" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td></tr></table>
</td>
<td class="img" style="font-size:0pt; line-height:0pt; text-align:left" width="18"></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END Button -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"><tr><td height="10" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td></tr></table>
<div class="text-col-2" style="color:#0F1934; font-family:Arial,sans-serif; font-size:14px; line-height:24px; text-transform:capitalize; font-weight: bolder; text-align:left;">
<span class="purple-text">Connect With Us</span>
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"><tr><td height="5" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td></tr></table>
<!-- Social Icons -->
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="img" style="font-size:0pt; line-height:0pt; text-align:left" width="27"><a href="#" target="_blank"><img alt="#" src="" width="23" height="23"/></a></td>
<td class="img" style="font-size:0pt; line-height:0pt; text-align:left" width="27"><a href="#" target="_blank"><img alt="#" src="#" width="23" height="23"/></a></td>
<td class="img" style="font-size:0pt; line-height:0pt; text-align:left" width="25"><a href="#" target="_blank"><img alt="#" src="#" width="21" height="23"></a></td>
<td class="img" style="font-size:0pt; line-height:0pt; text-align:left" width="27"><a href="#" target="_blank"><img alt="#" src="#" width="23" height="23"></a></td>
</tr>
</table>
<!-- END Social Icons -->
</td>
</tr>
</table>
</td>
</tr>
</table>
</th>
<!-- END Column 2 -->
<!-- Column -->
<th class="column" style="font-size:0pt; mso-line-height-rule:exactly; line-height:0pt; padding:0; margin:0; font-weight:normal; Margin:0" width="20"><div style="font-size:0pt; line-height:0pt;" class="mobile-br-20"></div></th>
<!-- END Column -->
<!-- Column 3 -->
<th class="column-top" style="font-size:0pt; mso-line-height-rule:exactly; line-height:0pt; padding:0; margin:0; font-weight:normal; vertical-align:top; Margin:0" width="400">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div class="text-col-3 copyright-text" style="color:#0F1934; font-family:Arial,sans-serif; font-size:14px; mso-line-height-rule:exactly; mso-text-raise:44px; line-height:24px; text-align:left;">
<span style="font-size:14px; color:#787985; mso-line-height-rule:exactly; mso-text-raise:44px; line-height:15px;">The Company, 1234 Main Street
<br/>
Suite 9999, Los Angeles, CA 10001</span>
<br/>
<br/>
<span style="font-size:12px; color:#787985; mso-line-height-rule:exactly; mso-text-raise:44px; line-height:17px;">&copy; 2019 The Company
<br/>
All Rights Reserved
<br/>
<a href="#" target="_blank" style="color:#787985;">Terms, Privacy & Notices</a></span>
</div>
</td>
</tr>
</table>
</th>
<!-- END Column 3 -->
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; mso-line-height-rule:exactly; line-height:0pt; text-align:center; width:100%; min-width:100%"><tr><td height="50" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td></tr></table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="content-spacing" style="font-size:0pt; line-height:0pt; text-align:left" width="1"></td>
</tr>
</table>
<!-- END Footer -->
Outlook 对 div 的支持参差不齐。
删除 div 并将样式 sheet 移至父级 td。请改用 line-height，因此它适用于所有电子邮件客户端。
删除 span 并改用 p。
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="text-col-3 copyright-text" style="color: #0F1934; font-family: Arial,sans-serif; font-size: 14px; line-height: 15px; text-align: left;">
<p>The Company, 1234 Main Street
<br />
Suite 9999, Los Angeles, CA 10001</p>
<p>&copy; 2019 The Company
<br />
All Rights Reserved
<br />
<a href="#" target="_blank" style="color: #787985;">Terms, Privacy & Notices</a></p>
</td>
</tr>
</table>
祝你好运。
我有一个包含 3 列的页脚，它们都严格嵌套在 HTML 电子邮件模板的基于 table 的布局中。我正在尝试修复页脚，其中第三列的行高与前两列的顶部基线不匹配。
我一直在做研究，看看是否有解决这个问题的方法，并尝试了 mso-line-height-rule:exactly; mso-text-raise:44px; 的变体到声明 line-height 的最后一列，但它似乎没有有任何影响。
您可以在下图中看到，文本在最后一列向下移动，并且文本间隔有点不同于在电子邮件中正确呈现的第二个图像。
Outlook 2013（在 Amazon Workspace - Windows 7 Pro 中）：
Outlook 2011 Mac:
页脚代码：
<!-- Footer -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td class="content-spacing" style="font-size:0pt; line-height:0pt; text-align:left" width="1"></td>
<td align="center">
<table width="650" border="0" cellspacing="0" cellpadding="0" class="mobile-shell">
<tr>
<td class="td" style="width:650px; min-width:650px; font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal; Margin:0">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"><tr><td height="25" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td></tr></table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<!-- Column 1 -->
<th class="column-top" style="font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal; vertical-align:top; Margin:0" width="150">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div class="img" style="font-size:0pt; line-height:0pt; text-align:left"><image src="https://www.designevo.com/res/templates/thumb_small/black-and-yellow-basketball.png" border="0" width="120" height="120" alt="Healthy Moms. Strong Babies." /></div></td>
</tr>
</table>
</th>
<!-- END Column 1 -->
<!-- Column -->
<th class="column" style="font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal; Margin:0" width="20"><div style="font-size:0pt; line-height:0pt;" class="mobile-br-20"></div></th>
<!-- END Column -->
<!-- Column 2 -->
<th class="column-top" style="font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal; vertical-align:top; Margin:0" width="150">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<!-- Button -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left">
<table border="0" cellspacing="0" cellpadding="0" bgcolor="blue" style="border-radius: 0;">
<tr>
<td class="img" style="font-size:0pt; line-height:0pt; text-align:left" width="18"></td>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"><tr><td height="10" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td></tr></table>
<div class="text-button" style="color:#ffffff; font-family:Arial,sans-serif; font-size:19px; line-height:18px; text-align:center; text-transform:uppercase">
<a href="#" target="_blank" class="link-white" style="color:#ffffff; text-decoration:none"><span class="link-white" style="color:#ffffff; text-decoration:none; font-weight:bolder;">BUTTON</span></a>
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"><tr><td height="10" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td></tr></table>
</td>
<td class="img" style="font-size:0pt; line-height:0pt; text-align:left" width="18"></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END Button -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"><tr><td height="10" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td></tr></table>
<div class="text-col-2" style="color:#0F1934; font-family:Arial,sans-serif; font-size:14px; line-height:24px; text-transform:capitalize; font-weight: bolder; text-align:left;">
<span class="purple-text">Connect With Us</span>
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"><tr><td height="5" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td></tr></table>
<!-- Social Icons -->
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="img" style="font-size:0pt; line-height:0pt; text-align:left" width="27"><a href="#" target="_blank"><img alt="#" src="" width="23" height="23"/></a></td>
<td class="img" style="font-size:0pt; line-height:0pt; text-align:left" width="27"><a href="#" target="_blank"><img alt="#" src="#" width="23" height="23"/></a></td>
<td class="img" style="font-size:0pt; line-height:0pt; text-align:left" width="25"><a href="#" target="_blank"><img alt="#" src="#" width="21" height="23"></a></td>
<td class="img" style="font-size:0pt; line-height:0pt; text-align:left" width="27"><a href="#" target="_blank"><img alt="#" src="#" width="23" height="23"></a></td>
</tr>
</table>
<!-- END Social Icons -->
</td>
</tr>
</table>
</td>
</tr>
</table>
</th>
<!-- END Column 2 -->
<!-- Column -->
<th class="column" style="font-size:0pt; mso-line-height-rule:exactly; line-height:0pt; padding:0; margin:0; font-weight:normal; Margin:0" width="20"><div style="font-size:0pt; line-height:0pt;" class="mobile-br-20"></div></th>
<!-- END Column -->
<!-- Column 3 -->
<th class="column-top" style="font-size:0pt; mso-line-height-rule:exactly; line-height:0pt; padding:0; margin:0; font-weight:normal; vertical-align:top; Margin:0" width="400">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div class="text-col-3 copyright-text" style="color:#0F1934; font-family:Arial,sans-serif; font-size:14px; mso-line-height-rule:exactly; mso-text-raise:44px; line-height:24px; text-align:left;">
<span style="font-size:14px; color:#787985; mso-line-height-rule:exactly; mso-text-raise:44px; line-height:15px;">The Company, 1234 Main Street
<br/>
Suite 9999, Los Angeles, CA 10001</span>
<br/>
<br/>
<span style="font-size:12px; color:#787985; mso-line-height-rule:exactly; mso-text-raise:44px; line-height:17px;">&copy; 2019 The Company
<br/>
All Rights Reserved
<br/>
<a href="#" target="_blank" style="color:#787985;">Terms, Privacy & Notices</a></span>
</div>
</td>
</tr>
</table>
</th>
<!-- END Column 3 -->
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; mso-line-height-rule:exactly; line-height:0pt; text-align:center; width:100%; min-width:100%"><tr><td height="50" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td></tr></table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="content-spacing" style="font-size:0pt; line-height:0pt; text-align:left" width="1"></td>
</tr>
</table>
<!-- END Footer -->
Outlook 对 div 的支持参差不齐。
删除 div 并将样式 sheet 移至父级 td。请改用 line-height，因此它适用于所有电子邮件客户端。
删除 span 并改用 p。
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="text-col-3 copyright-text" style="color: #0F1934; font-family: Arial,sans-serif; font-size: 14px; line-height: 15px; text-align: left;">
<p>The Company, 1234 Main Street
<br />
Suite 9999, Los Angeles, CA 10001</p>
<p>&copy; 2019 The Company
<br />
All Rights Reserved
<br />
<a href="#" target="_blank" style="color: #787985;">Terms, Privacy & Notices</a></p>
</td>
</tr>
</table>
祝你好运。