Android端Gmail/Outlook邮件签名行高与显示异常问题求助

Hey there, let's work through those frustrating line-height and formatting quirks you're seeing in Android Gmail and Outlook for your email signature. These clients have some notoriously picky rendering rules, but we can tweak your code to get consistent results.

Key Issues & Targeted Fixes #

1. Overly Large Line Heights (Android Gmail & Outlook) #

Both clients often ignore external CSS and even some inline line-height values—especially for paragraphs and empty table rows. Here’s how to lock in consistent spacing:

• Add mso-line-height-rule: exactly: This non-standard CSS property is critical for Outlook (it forces exact line height matching) and helps Gmail respect your values too.
• Use inline styles exclusively: Email clients strip most <head>/<style> block CSS, so move all styling directly to individual elements.
• Clean up empty elements: Remove the final <p>&nbsp;</p> tag at the end of your code—it’s adding unwanted extra space.
• Override default spacing for empty cells: Empty table rows/columns inherit default padding unless you explicitly set font-size:0; line-height:0; padding:0; margin:0; on them.

2. Stopping Auto-Linked Phone Numbers & Emails #

Gmail and Outlook automatically turn contact info into clickable links, which can break your signature’s styling. Fix this with two complementary tactics:

• Character escaping: Replace + with its HTML entity +, and insert zero-width spaces (​) in email addresses to break auto-detection.
• Inline styling: Wrap contact info in <span> tags to force default text styling (no underline, matching your signature’s text color).

Modified Signature Code #

Here’s your updated code with all these fixes applied:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mobile Email Signature</title>
<!-- Meta tag to suppress auto-detection (supports some clients) -->
<meta name="format-detection" content="telephone=no, email=no">
</head>
<body style="margin:0; padding:0;">
<table width="320px" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td style="padding:10px 5.4px 0 5.4px; border-top: 5px solid #2E38A5; border-bottom: 5px solid #2E38A5;">
        <table width="320px" border="0" cellspacing="0" cellpadding="0">
          <tbody>
            <tr>
              <td height="10px" colspan="4" align="right">Logo</td>
            </tr>
            <tr>
              <td colspan="4" height="10px" style="font-size:0; line-height:0; padding:0; margin:0;"></td>
            </tr>
            <tr>
              <td colspan="3">
                <p style="font-size:8pt; line-height:12pt!important; mso-line-height-rule: exactly; margin:0; padding:0;">First Last</p>
                <p style="font-size:8pt; line-height:12pt!important; mso-line-height-rule: exactly; margin:0; padding:0;">Sales Director</p>
              </td>
              <td width="30" style="font-size:0; line-height:0; padding:0; margin:0;">&nbsp;</td>
            </tr>
            <tr>
              <td height="10px" colspan="3" style="font-size:0; line-height:0; padding:0; margin:0;"></td>
              <td height="10px" style="font-size:0; line-height:0; padding:0; margin:0;"></td>
            </tr>
            <tr>
              <td width="22" height="10px" style="font-size:0; line-height:0; padding:0; margin:0;"></td>
              <td width="18" style="font-size:0; line-height:0; padding:0; margin:0;"></td>
              <td width="250" align="right">
                <p style="font-size:8pt; line-height:8pt!important; mso-line-height-rule: exactly; margin:0; padding:0;">
                  <span style="text-decoration:none; color:#000;">&#43;61 (0) 400 000 000 / &#43;000 9000 0000</span>
                </p>
                <p style="font-size:8pt; line-height:8pt!important; mso-line-height-rule: exactly; margin:0; padding:0;">
                  <span style="text-decoration:none; color:#000;">b&#x200B;oris@email.com / www.website.com</span>
                </p>
              </td>
              <td height="10px" style="font-size:0; line-height:0; padding:0; margin:0;"></td>
            </tr>
            <tr>
              <td height="10px" colspan="4" style="font-size:0; line-height:0; padding:0; margin:0;"></td>
            </tr>
            <tr>
              <td height="10px" colspan="4" style="font-size:0; line-height:0; padding:0; margin:0;"></td>
            </tr>
            <tr>
              <td height="10px" colspan="4" style="font-size:0; line-height:0; padding:0; margin:0;"></td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>

Extra Tips for Long-Term Success #

• Test on real devices: Tools like Litmus help, but nothing beats testing directly on Android Gmail and Outlook apps to catch edge cases.
• Ditch Word-generated HTML: Word adds bloated, client-specific code that causes inconsistencies—stick to hand-coded or cleaned-up HTML like the example above.
• Use px for spacing: While pt works for font sizes, px is more consistent for padding/margins across mobile devices.

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