Блог

Главная - Вопросы по программированию - HTML подпись электронной почты отображается по-разному / неправильно на разных почтовых клиентах

HTML подпись электронной почты отображается по-разному / неправильно на разных почтовых клиентах

#html #css #email #html-email #signature

#HTML #css #Адрес электронной почты #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>

HTML после встраивания с использованием https://putsmail.com/inliner

     <!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:

Не могли бы вы объяснить, как вы тестируете свой код и как вы настраиваете этот код в качестве подписи электронной почты? Это может сыграть большую роль в конечных результатах, поскольку то, что поддерживается, в конечном итоге будет определяться почтовым клиентом, который вы используете для отправки своих писем.

Я вижу несколько вещей, которые, как известно, уже вызывают проблемы в вашем коде:

  1. Отсутствие атрибутов сброса в ваших <table> тегах делает стили ваших таблиц стилями по умолчанию для клиентов. Добавьте border="0" cellpadding="0" cellspacing="0" role="presentation" для более согласованного отображения.
  2. width="150px" height="65px" на <img> должно быть определено без единиц измерения, иначе Outlook в Windows будет игнорировать его. Так что сделайте это width="150" height="65" .
  3. Встроенные !important объявления не поддерживаются Outlook в Windows.

В целом, ваш код также можно было бы сделать намного проще, используя одну таблицу и больше семантических элементов. Вот предложение кода, который вы могли бы использовать:

 <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>