How to remove "ghost" line showing up in a coded html email?-CodePudding

Sample Code:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
    <head>
        <title></title>
    </head>
    <body style="font-family: Arial; margin: 0; padding: 0;">
      <table align="center" width="600" cellpadding="0" cellspacing="0" border="0" style="width: 600px; background-color: #000000; font-family: Arial; font-size: 15px;color: #ff0000;">
          <tr>
              <td style="padding:10px;font-weight: bold;font-size: 20px; color: #ff0000;">Header Title</td>
          </tr>
          <tr>
              <td style="padding:10px;">Here is the content for this section.</td>
          </tr>
          <tr>
              <td style="padding:10px">
                  <a href="#" target="_blank"><img src="LearnMore.png" width="170" height="38" border="0" alt="Learn More" /></a>
              </td>
          </tr>
      </table>
    </body>
</html>

Output for Office 365 in windows 10

All other clients seem to be fine.

Attempted the fixes from here

Looks like if a font size of 12px or 16px doesn't show the line but the requirement is to use 15px

expected result

CodePudding user response：

The problem is often due to a rounding error in the Outlook engine (MS Word) with odd numbers. In your case, you've already identified an even numbered font-size works. Seeing as that's the core error, and it's not a bug in your code, you have to weigh up whether the unsightliness of the line is worse than changing the size of the font.

If that's not acceptable, you may have luck by setting a line-height of 16px like so: font-size:15px; line-height:16px;.

If all else fails, you can set the font-size differently just for Outlook desktops: font-size:15px; mso-ansi-font-size: 16px;