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

时间：2020-10-23 21:30:10

标签： html css email html-email signature

我正在使用一个自定义HTML签名，但是正在努力使其在大多数电子邮件客户端中看起来一致且正确。 CSS全部内联，据我所知，我正在准确地遵循Email 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>

1 个答案:

答案 0 :(得分：0)

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

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

  1. <table>标记中缺少重置属性，使表格样式受客户端默认样式的影响。添加border="0" cellpadding="0" cellspacing="0" role="presentation"以获得更一致的呈现。
    2. 必须定义width="150px" height="65px"上的
  2. <img>不带单位，否则Windows上的 Outlooks 将忽略它。因此，使该width="150" height="65"。
    3. Windows上的 Outlook 不支持
  3. 内联!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>
相关问题
最新问题