Question

我正在尝试发送电子邮件新闻稿，并且Outlook的填充都错了。这是我的代码：

          <div class="container">
              <div class="row">
                  <div class="col-md-3 col-sm-6">
                      <a class="scroll logo" href="#">
                          <img id="jsc" src="jscc.png">

                      </a>
                  </div>

                  <div class="col-md-6 text-center col-md-pull-3 col-sm-12">
                      <nav class="main-nav">
                          <div class="toggle-mobile-but">
                              <a href="#" class="mobile-but">
                                  <div class="lines"></div>
                              </a>
                          </div>
                          <ul>
                                  <li><a class="scroll" href="#about">About</a></li>
                                  <li><a class="scroll" href="#services">Services</a></li>
                                  <li><a class="scroll" href="#stories">Stories</a></li>
                                  <li><a class="scroll" href="#pricing">Pricing</a></li>
                                  <li><a class="scroll" href="#contact">Contact</a></li>
                               </ul>
                      </nav>
                  </div>
                  <div class="col-md-3 text-right col-sm-6 col-md-push-6">
                          <a href="#" class="but round scroll">Contact</a>
                          <div class="icons align-self-end">
                                <i class="fa fa-facebook-official icon"></i>
                                <i class="fa fa-instagram icon"></i>
                                <i class="fa fa-youtube-play icon"></i>

                          </div>
                      </div>

右侧的按钮最终高于左侧的按钮。您如何使它们与前景保持一致？

我尝试用边距替换边距，但仍然没有锁定。我也使用％而不是px。

当我也在浏览器中查看它时，它看起来也很好。

Answer 1

电子邮件开发不是html开发。即使您通过该Web浏览器查看电子邮件，您的Web浏览器仍提供与IOS，Gmail，Outlook等电子邮件客户端不同的功能集。

Outlook对填充的支持不一。

https://www.campaignmonitor.com/css/box-model/padding/

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，因为它是一种Webfont，并且对webfonts的名称支持不一，其中带有空格的名称。 Arial不是一个好的后备。可以考虑使用Trebuchet MS之类的东西。

祝你好运。

电子邮件模板填充未对齐

1 个答案: