Не заполнен шаблон электронной почты - PullRequest
Новая
       18

Не заполнен шаблон электронной почты

0 голосов
/ 30 марта 2019

Я пытаюсь отправить по электронной почте новостные рассылки, и отступы все неверны в перспективе.вот мой код: 

<div style="height: 600px; overflow:hidden;">
  <table style="width: 520px;" cellspacing="0" cellpadding="0" border="0" align="center">
    <tbody>
      <tr>
        <td width="500">
          <table style="width: 250px;" cellspacing="0" cellpadding="0" border="0" align="left">
            <tbody>
              <tr>
                <td>
                  <p style="font-family: Helvetica Neue, Arial; font-size: 12px; line-height: 1.5; color: #cccccc; margin: 0px;"><i>bla bla | adadadsd</i></p>
                </td>
              </tr>
              <tr>
                <td><img createnew="true" src="https://multimedia.getresponse.com/getresponse-zMTNQ/photos/563de7a4-ca7d-462a-88be-1cd31ef21fc4.jpg" style="padding-bottom:10px;" width="250" height="250"></td>
              </tr>
              <tr>
                <td>
                  <h3 style="font-family: Helvetica Neue, Arial; font-size: 18px; line-height: 1.5; color: #194845; margin: 0px; mso-line-height-rule:exactly;">adad is the way to go!</h3>
                </td>
              </tr>
              <tr>
                <td>
                  <p style="font-family: Helvetica Neue, Arial; font-size: 12px; color: #c69a5b; margin: 0px;">................</p>
                </td>
              </tr>
              <tr>
                <td height="27"><img createnew="true" src="http://newsletter.etiketa-dev.xyz/nl-27/linetitle.png" width="53" height="6"></td>
              </tr>
              <tr>
                <td valign="top" height="139">
                  <p style="font-family: Helvetica Neue, Arial; font-size: 14px; line-height: 1.5; color: #222222; margin: 0px;">ajksdhajkh ajhdkajhd hdkahdkahdkah hdkahdkahdkja adajhdakjdkahd asdadhkad ahdkahdkadhkadha Obradovic. Uadd has been certified adad APP, and is ready to implement best practice on all 3244 projects.
                  </p>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="https://adad.co/2019/03/29/well-is-the-way-to-go/" target="_blank"><img createnew="true" src="http://newsletter.etiketa-dev.xyz/nl-27/cta1.jpeg" style="padding-top:6%;" width="250" height="60"></a>
                </td>
              </tr>
            </tbody>
          </table>
          <table style="width: 250px;" cellpadding="0" border="0" align="right">
            <tbody>
              <tr>
                <td>
                  <p style="font-family: Helvetica Neue, Arial; font-size: 12px; line-height: 1.5; color: #cccccc; margin: 0px; text-decoration:none; margin:0;"><i>adad | asda.org</i></p>
                </td>
              </tr>
              <tr>
                <td><img createnew="true" src="https://multimedia.getresponse.com/getresponse-zMTNQ/photos/a6042f20-f80a-4826-830b-eb482d49280c.jpg" width="250" height="250"></td>
              </tr>
              <tr>
                <td>
                  <h3 style="font-family: Helvetica Neue, Arial; font-size: 18px; line-height: 1.5; color: #194845; margin: 0px;mso-line-height-rule:exactly;">adadd in Eastern Europe</h3>
                </td>
              </tr>
              <tr>
                <td>
                  <p style="font-family: Helvetica Neue, Arial; font-size: 12px; color: #c69a5b; margin: 0px;">adad leads in asdasdad the asdad adada!</p>
                </td>
              </tr>
              <tr>
                <td height="27"><img createnew="true" src="http://newsletter.etiketa-dev.xyz/nl-27/linetitle.png" width="53" height="6"></td>
              </tr>
              <tr>
                <td valign="top" height="139">
                  <p style="font-family: Helvetica Neue, Arial; font-size: 14px; line-height: 1.5; color: #222222; margin: 0px;">jahdajkd adwrkjq akjdadka ajdajhd akjdkhr wrwr wrwrakn kajdalkjd jakljdaljd akljdjeor kadjlqldm lajkdjojd akljd jdks ks akdj of 2019!</p>
                </td>
              </tr>
              <tr>
                <td>
                  <a href="https://asdad.co/2019/03/29/ctbuh-premiers-in-eastern-europe/" target="_blank"><img createnew="true" src="http://newsletter.etiketa-dev.xyz/nl-27/cta1.jpeg" style="padding-top:4%;" width="250" height="60"></a>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Кнопка справа заканчивается выше, чем кнопка слева.Как бы вы выровняли их по внешнему виду?

Я пытался заменить поля с отступами, но все еще без блокировки.Я использовал% вместо px тоже.

Выглядит хорошо, когда я также просматриваю его в браузере.

1 Ответ

1 голос
/ 30 марта 2019

Разработка электронной почты НЕ является разработкой HTML. Ваш веб-браузер поддерживает другой набор функций, чем почтовый клиент, такой как IOS, Gmail, Outlook и другие, даже если вы просматриваете свои электронные письма через этот веб-браузер.

Outlook имеет пятнистую поддержку для заполнения.

padding-top вообще не работает с Outlook 2013-2019. Переместите отступ с изображения на родительский элемент td. 

<tr>
  <td style="padding: 10px 0 0 0;">
    <a href="https://adad.co/2019/03/29/well-is-the-way-to-go/" target="_blank">
     <img createnew="true" src="http://newsletter.etiketa-dev.xyz/nl-27/cta1.jpeg" style="padding-top:6%;" width="250" height="60"></a>
  </td>
</tr>

Кроме того, Outlook имеет пятнистую поддержку значений%. Вместо этого я использовал отступ в 10 пикселей.

И, наконец, Outlook 2007-2019 никогда не будет поддерживать Helvetica Neue, поскольку это веб-шрифт, и он имеет пятнистую поддержку веб-шрифтов с пробелом в имени. Ариал не хороший запасной вариант. Вместо этого рассмотрим что-то вроде Trebuchet MS.

Удачи.

...