Litmus测试邮件模板：Outlook2007标签内文本间距异常求助

Outlook 2007 (and other versions relying on Word’s rendering engine) is infamous for weird spacing glitches, especially when dealing with nested elements like your button wrapped in <a>, <strong>, and table cells. Let’s break down why this is happening and how to fix it.

Why This Happens #

Outlook 2007 doesn’t handle inline-block elements or nested text tags the same way modern email clients do. Your current setup uses large vertical padding on the <a> tag combined with a nested <strong>—this throws off Word’s rendering logic, leading to those unexpected big gaps around the button text.

Step-by-Step Fixes #

Here’s what you can adjust to make the button behave consistently in Outlook 2007 while keeping it functional everywhere else:

• Swap inline-block for block (Outlook-friendly): Outlook struggles with inline-block; using block with explicit dimensions avoids rendering conflicts.
• Simplify nested tags: Reduce unnecessary nesting where possible—sometimes fewer layers mean fewer rendering bugs.
• Lock in line height with Outlook-specific styles: Combine line-height with mso-line-height-rule: exactly to force consistent spacing, matching the button’s height.
• Trim excessive padding: The large vertical padding on your <a> tag might be pushing content out of bounds in Outlook.

Modified Code Example #

<!--CTA-->
<tr>
<td align="center" valign="middle">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" bgcolor="#009cb3" width="200" height="60" style="-webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; mso-line-height-rule: exactly; line-height: 60px;">
<a class="bg-rollover" href="" target="_blank" style="font-size:14px;font-family:Helvetica, Arial, sans-serif;color:#ffffff;text-decoration:none;display:block;width:200px;height:60px;line-height:60px;border:1px solid #009cb3;-webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; mso-line-height-rule: exactly;">
<strong style="text-transform:uppercase;display:inline-block;line-height:1.2;mso-line-height-rule: exactly;">button text</strong>
</a>
</td>
</tr>
</table>
</td>
</tr>
<!--End of CTA-->

Key Changes Explained #

• Added valign="middle" to the parent <td> to ensure proper vertical alignment in Outlook.
• Changed the <a> tag to display:block with explicit width and height matching the button cell, eliminating padding-driven overflow.
• Applied mso-line-height-rule: exactly alongside line-height:60px on both the button cell and <a> tag to lock in the exact height.
• Set a smaller line-height:1.2 on the <strong> tag to prevent text from pushing out, while retaining the Outlook-specific rule for consistency.

If spacing still persists, try removing the <strong> tag entirely and applying text-transform:uppercase directly to the <a> tag—sometimes cutting down on nesting is the quickest fix for Outlook’s quirks.

内容的提问来源于stack exchange，提问作者edvvards