1

根据有关酸的电子邮件向我显示的内容，我看到了一些链接和文本以电子邮件为中心的位置

Outlook中的链接居中错误

但这是它应该看起来的样子，大多数其他电子邮件客户端都正确显示了这一点

正确的链接居中

这些链接所在的表格如下所示

<table class="row bg-white">
            <tr>
              <td class="wrapper last">

                <table class="twelve columns footer">
                  <tr>
                    <td class="center">
                      <center>
                        <a href="#">
                          <img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/d86f2f3e-fb48-4dac-a901-fb2c6e764ded.png" />
                        </a>
                        <a href="#">
                          <img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/83304962-c8e5-4e51-95cd-ffbb46fd9386.png" />
                        </a>
                        <a href="#">
                          <img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/8fbfc755-58dd-4ad3-9df6-31df23b9b4e0.png" />
                        </a>
                        <a href="#">
                          <img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/acbdc917-00a3-421b-a56f-2b03d3f7c72e.png" />
                        </a>
                        <span class="copy">© 2015. All Rights Reserved.</span>
                      </center>
                    </td>
                    <td class="expander"></td>
                  </tr>
                </table><!-- /twelve columns -->

              </td>
            </tr>
          </table><!-- /row -->

我正在使用 Zurb 的 ink 框架来构建它，这是我添加的 css 规则

.footer a {
    display: inline-block;
  }
  .footer span.copy {
    display: block;
    margin-top: 6px;
    font-size: 10px;
  }
  .footer td.center {
    padding: 30px 0;
  }

我正在添加这个 JSBin 链接，因为 Ink 框架发生了很多 CSS 操作

https://jsbin.com/pewoluwapo/edit?html，输出

更新： 在尝试了 Gortonington 的回答后，我现在在 Outlook 中得到了这个

尝试回答后的 Outlook 链接问题

4

3 回答 3

0

我认为一些 MSO 条件应该为 Outlook 解决它。您还需要确保在上传之前进行内联（以防万一）以确保 Gmail 等可以读取您的所有 CSS。

下面只是 MSO 条件而不是内联：

<!doctype html>
<html>
<head>
<style>
.footer a {
    display: inline-block;
  }
  .footer span.copy {
    display: block;
    margin-top: 6px;
    font-size: 10px;
  }
  .footer td.center {
    padding: 30px 0;
  }
  </style>
  </head>
  <body>

<table class="row bg-white">
            <tr>
              <td class="wrapper last">

                <table class="twelve columns footer">
                  <tr>
                    <td class="center">
                      <center>
                        <a href="#">
                          <img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/d86f2f3e-fb48-4dac-a901-fb2c6e764ded.png" />
                        </a>
                        <a href="#">
                          <img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/83304962-c8e5-4e51-95cd-ffbb46fd9386.png" />
                        </a>
                        <a href="#">
                          <img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/8fbfc755-58dd-4ad3-9df6-31df23b9b4e0.png" />
                        </a>
                        <a href="#">
                          <img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/acbdc917-00a3-421b-a56f-2b03d3f7c72e.png" />
                        </a>
                        <!--[if (mso) | (IE)]></center></td></tr><tr><td><center><![endif]-->
                        <span class="copy">© 2015. All Rights Reserved.</span>
                      </center>
                    </td>
                    <td class="expander"></td>
                  </tr>
                </table><!-- /twelve columns -->

              </td>
            </tr>
          </table><!-- /row -->
          </body>
          </html>

编辑：根据您的评论，我深入研究了您电子邮件的 JSBin，发现问题在于图像包含“float：left；clear：both；display：block；”以及“align='left'”这导致它在表格中左对齐。有两种选择：

1.) 从 CSS 中或内联后删除此代码

2.) 创建一个定义的宽度表来保存社交媒体和版权信息。（这可能是最跨客户端兼容的解决方案）

为了不更改任何现有代码或在内联 Zurb INK 时插入的 CSS - 我必须在 TD 内以 100% 创建一个表来清除父表内继承的对齐和块/浮点数，然后我创建了里面的另一个嵌套表用于存放社交图标和版权信息。然后在顶部的 TD 内，我创建了第三个嵌套表，以允许每个图标都有自己的 TD，而不会引起问题或要求 colspan 获得下面的版权。

请参见下面的示例：（在内联代码后）

<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
                    <tr>
                    <td align="center">
                    <table width="230" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
                    <tr>
                    <td align="center">
                    <table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
                    <tr>
                    <td align="center" style="padding:0 5px;">
                            <a href="#" style="color: #2ba6cb; text-decoration: none; display: inline-block;">
                              <img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/d86f2f3e-fb48-4dac-a901-fb2c6e764ded.png" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block; border: none;" align="left" /></a>
                              </td>
                              <td align="center" style="padding:0 5px;">
                            <a href="#" style="color: #2ba6cb; text-decoration: none; display: inline-block;">
                              <img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/83304962-c8e5-4e51-95cd-ffbb46fd9386.png" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block; border: none;" align="left" /></a>
                              </td>
                              <td align="center" style="padding:0 5px;">
                            <a href="#" style="color: #2ba6cb; text-decoration: none; display: inline-block;">
                              <img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/8fbfc755-58dd-4ad3-9df6-31df23b9b4e0.png" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block; border: none;" align="left" /></a>
                              </td>
                              <td align="center" style="padding:0 5px;">
                            <a href="#" style="color: #2ba6cb; text-decoration: none; display: inline-block;">
                              <img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/acbdc917-00a3-421b-a56f-2b03d3f7c72e.png" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block; border: none;" align="left" /></a>
                              </td>
                              </tr>
                              </table>
                              </td>
                              </tr>
                              <tr>
                              <td align="center" style="padding:5px;">
                            <span class="copy" style="display: block; margin-top: 6px; font-size: 10px;">© 2015. All Rights Reserved.</span>
                        </td>
                        </tr>
                        </table>
                        </td>
                        </tr>
                        </table>
于 2015-09-02T19:12:48.000 回答
0

所有电子邮件客户端都有不同的支持，就像网络浏览器一样，这表明 Outlook 不支持中心标签。

我建议删除中心标签并改用广泛支持的方法（align="center"）。还要记住使用 © 而不是实际的符号，因为它也不总是受支持！在此处查看更多 HTML 代码：http ://www.ascii.cl/htmlcodes.htm

<table class="row bg-white">
            <tr>
              <td class="wrapper last">

                <table class="twelve columns footer">
                  <tr>
                    <td class="center" align="center">
                        <a href="#">
                          <img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/d86f2f3e-fb48-4dac-a901-fb2c6e764ded.png" />
                        </a>
                        <a href="#">
                          <img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/83304962-c8e5-4e51-95cd-ffbb46fd9386.png" />
                        </a>
                        <a href="#">
                          <img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/8fbfc755-58dd-4ad3-9df6-31df23b9b4e0.png" />
                        </a>
                        <a href="#">
                          <img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/acbdc917-00a3-421b-a56f-2b03d3f7c72e.png" />
                        </a><br/>
                        <span class="copy">&copy; 2015. All Rights Reserved.</span>
                    </td>
                    <td class="expander"></td>
                  </tr>
                </table><!-- /twelve columns -->

              </td>
            </tr>
          </table><!-- /row -->

于 2015-09-02T20:56:15.087 回答
0

添加以下规则：http://jsfiddle.net/L9grd3ja/。默认情况下，表格会收缩其内容。

table {
    width: 100%;
}
于 2015-09-02T19:10:01.377 回答