时间戳

首页 > 解决方案 > HTML 电子邮件签名在不同的电子邮件客户端上呈现不同/不正确

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

问题描述

我有一个正在处理的自定义 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>

标签： htmlcssemailhtml-emailsignature

解决方案

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

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

  1. 标签中缺少重置属性<table>使您的表格样式受客户默认样式的约束。添加border="0" cellpadding="0" cellspacing="0" role="presentation"以获得更一致的渲染。
  2. width="150px" height="65px"on<img>必须在没有单位的情况下定义，否则 Windows 上的 Outlook将忽略它。所以做那个width="150" height="65"。
  3. 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>

推荐阅读