2

我在为客户构建的 HTML 电子邮件中对齐号召性用语按钮时遇到了一些问题。按钮出现在左侧并且未正确填充。

这是它们在我的浏览器和大多数电子邮件客户端中的显示方式：

正确的按钮

这就是它们在 Outlook 2016 中的显示方式：

展望输出

这是我的 Inky 标记：

<row class="call-to-actions">
    <columns small="6">
        <spacer size="50"></spacer>
        <button class="facebook float-right" href="#">Like on Facebook</button>
        <spacer size="50"></spacer>
    </columns>
    <columns small="6">
        <spacer size="50"></spacer>
        <button class="twitter" href="#">Follow on Twitter</button>
        <spacer size="50"></spacer>
    </columns>
</row>

我的按钮 SASS：

table {
  &.button {
    table {
      td {
        background: transparent !important;
      }
    }
    &.facebook {
      table {
        background-color: #3b5998;
        td {
          a {
            background-color: #3b5998;
            border: none;
            line-height: 30px;
          }
        }
      }
    }

    &.twitter {
      table {
        background-color: #1da1f2;
        td {
          background-color: #1da1f2;
          a {
            background-color: #1da1f2;
            border: none;
            line-height: 30px;
          }
        }
      }
    }
  }
}

我正在使用 Foundation for Email 将标记编译为电子邮件友好的 HTML。这是生成的输出：

<table class="row call-to-actions" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%">

  <tbody>
    <tr style="padding:0;text-align:left;vertical-align:top">
      <th class="small-6 large-6 columns first"
      style="Margin:0 auto;color:#878787;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;line-height:1.6;margin:0 auto;padding:0;padding-bottom:0!important;padding-left:16px;padding-right:10px!important;text-align:left;width:274px">

        <table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
          <tbody>
            <tr style="padding:0;text-align:left;vertical-align:top">
              <th style="Margin:0;color:#878787;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;line-height:1.6;margin:0;padding:0;text-align:left">

                <table class="spacer"
                style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
                  <tbody>
                    <tr style="padding:0;text-align:left;vertical-align:top">
                      <td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#878787;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:50px;font-weight:400;hyphens:auto;line-height:50px;margin:0;mso-line-height-rule:exactly;padding:0;text-align:left;vertical-align:top;word-wrap:break-word"
                      height="50px"></td>
                    </tr>
                  </tbody>
                </table>
                <table class="button facebook float-right"
                style="Margin:0;border-collapse:collapse;border-spacing:0;float:right;margin:0;padding:0;text-align:left;vertical-align:top;width:auto">

                  <tbody>
                    <tr style="padding:0;text-align:left;vertical-align:top">
                      <td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#878787;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;hyphens:auto;line-height:1.6;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word">

                        <table style="background-color:#3b5998;border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">

                          <tbody>
                            <tr style="padding:0;text-align:left;vertical-align:top">
                              <td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;background:0 0!important;border:none;border-collapse:collapse!important;color:#fff;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;hyphens:auto;line-height:1.6;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word">

                                <a href="#"
                                style="Margin:0;background-color:#3b5998;border:none;border-radius:500px;color:#fff;display:inline-block;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;line-height:30px;margin:0;padding:8px 16px 8px 16px;text-align:left;text-decoration:none">
                                Like on Facebook</a>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
                <table class="spacer"
                style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
                  <tbody>
                    <tr style="padding:0;text-align:left;vertical-align:top">
                      <td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#878787;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:50px;font-weight:400;hyphens:auto;line-height:50px;margin:0;mso-line-height-rule:exactly;padding:0;text-align:left;vertical-align:top;word-wrap:break-word"
                      height="50px"></td>
                    </tr>
                  </tbody>
                </table>
              </th>
            </tr>
          </tbody>
        </table>
      </th>
      <th class="small-6 large-6 columns last"
      style="Margin:0 auto;color:#878787;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;line-height:1.6;margin:0 auto;padding:0;padding-bottom:0!important;padding-left:10px!important;padding-right:16px;text-align:left;width:274px">

        <table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
          <tbody>
            <tr style="padding:0;text-align:left;vertical-align:top">
              <th style="Margin:0;color:#878787;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;line-height:1.6;margin:0;padding:0;text-align:left">

                <table class="spacer"
                style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
                  <tbody>
                    <tr style="padding:0;text-align:left;vertical-align:top">
                      <td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#878787;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:50px;font-weight:400;hyphens:auto;line-height:50px;margin:0;mso-line-height-rule:exactly;padding:0;text-align:left;vertical-align:top;word-wrap:break-word" height="50px"></td>
                    </tr>
                  </tbody>
                </table>
                <table class="button twitter"
                style="Margin:0;border-collapse:collapse;border-spacing:0;margin:0;padding:0;text-align:left;vertical-align:top;width:auto">

                  <tbody>
                    <tr style="padding:0;text-align:left;vertical-align:top">
                      <td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#878787;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;hyphens:auto;line-height:1.6;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word">

                        <table style="background-color:#1da1f2;border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">

                          <tbody>
                            <tr style="padding:0;text-align:left;vertical-align:top">
                              <td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;background:0 0!important;background-color:#1da1f2;border:none;border-collapse:collapse!important;color:#fff;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;hyphens:auto;line-height:1.6;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word">

                                <a href="#"
                                style="Margin:0;background-color:#1da1f2;border:none;border-radius:500px;color:#fff;display:inline-block;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;line-height:30px;margin:0;padding:8px 16px 8px 16px;text-align:left;text-decoration:none">
                                Follow on Twitter</a>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
                <table class="spacer"
                style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
                  <tbody>
                    <tr style="padding:0;text-align:left;vertical-align:top">
                      <td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#878787;font-family:&#39;Circular Book&#39;,Helvetica,Arial,sans-serif;font-size:50px;font-weight:400;hyphens:auto;line-height:50px;margin:0;mso-line-height-rule:exactly;padding:0;text-align:left;vertical-align:top;word-wrap:break-word" height="50px"></td>
                    </tr>
                  </tbody>
                </table>
              </th>
            </tr>
          </tbody>
        </table>
      </th>
    </tr>
  </tbody>
</table>

我错过了什么？

4

2 回答 2

2

paddingOutlook 2007-2016 的支持存在缺陷。它根本不适用于 Notes。

line-heightOutlook 也有问题。

我可能会尝试将 设置<td height="30">为您的 href 的父级，以便您获得按钮的高度，“Like on Facebook”。

此外，font-family:&#39;Circular Book&#39;不会与 Outlook 一起使用。网络字体支持也有问题。某些字体可以使用，但具有两个名称的字体不是 Web 安全字体会导致 Outlook 恢复为其 Web 安全字体 Times New Roman。

祝你好运。

于 2017-12-19T18:46:19.683 回答
1

这是 Outlook 中非常常见的问题。我推荐Campaign Monitor 的 Bulletproof Buttons。它是非常好的跨平台，而且效果非常棒。

于 2017-12-20T17:18:18.580 回答