html - 电子邮件模板填充未对齐

标签 html css outlook

我正在尝试发送电子邮件时事通讯,但 outlook 上的填充都是错误的。这是我的代码:

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

在浏览器上看也不错。

最佳答案

电子邮件开发不是 html 开发。您的 Web 浏览器支持一组不同于 IOS、Gmail、Outlook 等电子邮件客户端的功能,即使您通过该 Web 浏览器查看电子邮件也是如此。

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 对 % 值的支持参差不齐。我改用 10px 的内边距。

最后,Outlook 2007-2019 永远不会支持 Helvetica Neue,因为它是一种网络字体,并且对名称中带有空格的网络字体的支持参差不齐。 Arial 不是一个好的后备。考虑使用 Trebuchet MS 之类的东西。

祝你好运。

关于html - 电子邮件模板填充未对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55432543/

相关文章:

java - 如何生成与 Jsoup 中特定元素匹配的 XPath 查询?

javascript - 在 JavaScript 附加中调用带有参数的函数

jquery - 将按钮变成 jQuery UI 图标?

html - 为 <li> 设置背景颜色,但不是它的 child

c# - 使用 C# 的 MS Outlook 集成

html - Drupal 照片不对齐

ajax - HTML5 和 AJAX 与 Adob​​e Flash 和 Actionscript 在多媒体和视频 session 方面的对比

javascript - 悬停时更改 GridView

email - 如何跳过具有任何类别标签的邮件,但处理没有标签的邮件?

vba - 我如何知道规则何时完成处理?