HTML 电子邮件签名在不同的电子邮件客户端上呈现不同/不正确答案

【问题标题】：HTML email signature rendering differently/incorrectly on different email clientsHTML 电子邮件签名在不同的电子邮件客户端上呈现不同/不正确
【发布时间】：2020-10-23 21:30:10
【问题描述】：

我正在处理一个自定义 HTML 签名，但我正在努力使其在大多数电子邮件客户端中看起来一致且正确。 CSS 都是内联的，据我所知，我准确地遵循了电子邮件 CSS 标准。

发生的主要问题是在不同的电子邮件客户端（Gmail、iOS Mail 等）之间，文本颜色有时会变为黑色，并且与我设置的蓝色不一致，并且文本的垂直对齐方式与图像的关系发生变化并且不一致。此外，我无法始终让链接上的文本装饰消失。删除了识别信息的代码如下。

内联前的 HTML

<head>
<meta charset="utf-8" />
<style>
    * {
        font-style: normal;
        font-stretch: normal;
        line-height: 17px;
        letter-spacing: normal;
        font-family: Avenir, Arial, sans-serif;
        font-size: 14px;
        border-collapse: collapse;
        color: #000157 !important;
        text-decoration: none !important;
    }

    .table-wrapper {
        padding-top: 10px;
        padding-left: 10px;

    }

    .personal-image-wrapper {
        vertical-align: center;
    }

    .info-wrapper {
        padding-left: 15px;
    }

    .info-name {
        font-size: 16px;
        font-weight: bold;
    }

</style>
</head>

<body>
<table>
    <tr>
        <td class="table-wrapper">
            <table>
                <tr>
                    <td class="personal-image-wrapper">
                        <a href="https://www.google.com/" target="_blank">
                            <img width="150px" height="65px" class="personal-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/Black.png/440px-Black.png" />
                        </a>
                    </td>
                    <td class="info-wrapper">
                        <table>
                            <tr>
                                <td class="info-name">First Last</td>
                            </tr>
                            <tr>
                                <td class="info-profession">Job Description</td>
                            </tr>
                            <tr>
                                <td class="info-website">
                                    <a href="https://www.google.com/" target="_blank">website.com</a></td>
                            </tr>

                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</body>

使用 https://putsmail.com/inliner 内联后的 HTML

    <!DOCTYPE html>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
    <html>
      <head>
        <meta charset="utf-8">

      </head>
      <body style="font-style:normal;font-stretch:normal;line-height:17px;letter-spacing:normal;font-family:Avenir, Arial, sans-serif;font-size:14px;border-collapse:collapse;color:#000157 !important;text-decoration:none !important;">
        <table style="font-style:normal;font-stretch:normal;line-height:17px;letter-spacing:normal;font-family:Avenir, Arial, sans-serif;font-size:14px;border-collapse:collapse;color:#000157 !important;text-decoration:none !important;">
          <tr style="font-style:normal;font-stretch:normal;line-height:17px;letter-spacing:normal;font-family:Avenir, Arial, sans-serif;font-size:14px;border-collapse:collapse;color:#000157 !important;text-decoration:none !important;">
            <td class="table-wrapper" style="font-style:normal;font-stretch:normal;line-height:17px;letter-spacing:normal;font-family:Avenir, Arial, sans-serif;font-size:14px;border-collapse:collapse;padding-top:10px;padding-left:10px;color:#000157 !important;text-decoration:none !important;">
              <table style="font-style:normal;font-stretch:normal;line-height:17px;letter-spacing:normal;font-family:Avenir, Arial, sans-serif;font-size:14px;border-collapse:collapse;color:#000157 !important;text-decoration:none !important;">
                <tr style="font-style:normal;font-stretch:normal;line-height:17px;letter-spacing:normal;font-family:Avenir, Arial, sans-serif;font-size:14px;border-collapse:collapse;color:#000157 !important;text-decoration:none !important;">
                  <td class="personal-image-wrapper" style="font-style:normal;font-stretch:normal;line-height:17px;letter-spacing:normal;font-family:Avenir, Arial, sans-serif;font-size:14px;border-collapse:collapse;vertical-align:center;color:#000157 !important;text-decoration:none !important;">
                    <a href="https://www.google.com/" target="_blank" style="font-style:normal;font-stretch:normal;line-height:17px;letter-spacing:normal;font-family:Avenir, Arial, sans-serif;font-size:14px;border-collapse:collapse;color:#000157 !important;text-decoration:none !important;">
                      <img width="150px" height="65px" class="personal-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/Black.png/440px-Black.png" style="font-style:normal;font-stretch:normal;line-height:17px;letter-spacing:normal;font-family:Avenir, Arial, sans-serif;font-size:14px;border-collapse:collapse;color:#000157 !important;text-decoration:none !important;"/>
                                </a>
                  </td>
                  <td class="info-wrapper" style="font-style:normal;font-stretch:normal;line-height:17px;letter-spacing:normal;font-family:Avenir, Arial, sans-serif;font-size:14px;border-collapse:collapse;padding-left:15px;color:#000157 !important;text-decoration:none !important;">
                    <table style="font-style:normal;font-stretch:normal;line-height:17px;letter-spacing:normal;font-family:Avenir, Arial, sans-serif;font-size:14px;border-collapse:collapse;color:#000157 !important;text-decoration:none !important;">
                      <tr style="font-style:normal;font-stretch:normal;line-height:17px;letter-spacing:normal;font-family:Avenir, Arial, sans-serif;font-size:14px;border-collapse:collapse;color:#000157 !important;text-decoration:none !important;">
                        <td class="info-name" style="font-style:normal;font-stretch:normal;line-height:17px;letter-spacing:normal;font-family:Avenir, Arial, sans-serif;font-size:14px;border-collapse:collapse;font-size:16px;font-weight:bold;color:#000157 !important;text-decoration:none !important;">First Last</td>
                      </tr>
                      <tr style="font-style:normal;font-stretch:normal;line-height:17px;letter-spacing:normal;font-family:Avenir, Arial, sans-serif;font-size:14px;border-collapse:collapse;color:#000157 !important;text-decoration:none !important;">
                        <td class="info-profession" style="font-style:normal;font-stretch:normal;line-height:17px;letter-spacing:normal;font-family:Avenir, Arial, sans-serif;font-size:14px;border-collapse:collapse;color:#000157 !important;text-decoration:none !important;">Job Description</td>
                      </tr>
                      <tr style="font-style:normal;font-stretch:normal;line-height:17px;letter-spacing:normal;font-family:Avenir, Arial, sans-serif;font-size:14px;border-collapse:collapse;color:#000157 !important;text-decoration:none !important;">
                        <td class="info-website" style="font-style:normal;font-stretch:normal;line-height:17px;letter-spacing:normal;font-family:Avenir, Arial, sans-serif;font-size:14px;border-collapse:collapse;color:#000157 !important;text-decoration:none !important;">
                          <a href="https://www.google.com/" target="_blank" style="font-style:normal;font-stretch:normal;line-height:17px;letter-spacing:normal;font-family:Avenir, Arial, sans-serif;font-size:14px;border-collapse:collapse;color:#000157 !important;text-decoration:none !important;">website.com</a>
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </body>
    </html>

【问题讨论】：

标签： html css email html-email signature

【解决方案1】：

您能否解释一下您是如何测试代码以及如何将此代码设置为电子邮件签名的？这可能在最终结果中发挥重要作用，因为支持的内容最终将由您用于发送电子邮件的电子邮件客户端定义。

我已经看到一些已知会导致您的代码出现问题的事情：

<table> 标记中缺少重置属性使您的表格样式受客户端默认样式的约束。添加border="0" cellpadding="0" cellspacing="0" role="presentation" 以获得更一致的渲染。
<img> 上的 width="150px" height="65px" 必须在没有单位的情况下定义，否则 Windows 上的 Outlooks 将忽略它。所以，让width="150" height="65"。
Windows 上的 Outlook 不支持内联 !important 声明。

总体而言，通过使用单个表格和更多语义元素，您的代码也可以变得更加简单。以下是您可以使用的代码建议：

<table border="0" cellpadding="0" cellspacing="0" role="presentation">
  <tr>
    <td style="padding:10px; vertical-align:middle;"><a href="https://www.example.com" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/Black.png/440px-Black.png" alt="" border="0" width="150" height="65" style="vertical-align:middle; color:#000157; font:14px/17px Avenir, sans-serif; background:#eee;" /></td>
    <td style="padding:10px 5px; vertical-align:middle;">
      <p style="margin:0; color:#000157; font:bold 16px/19px Avenir, sans-serif; text-align:left;">
        First Last
      </p>
      <p style="margin:0; color:#000157; font:14px/19px Avenir, sans-serif; text-align:left;">
        Job Description
      </p>
      <p style="margin:0; color:#000157; font:14px/19px Avenir, sans-serif; text-align:left;">
        <a href="https://www.example.com" target="_blank" style="color:#000157; text-decoration:none;">example.com</a>
      </p>
    </td>
  </tr>
</table>

【讨论】：