如何在HTML电子邮件中链接块级元素？

Question

如何在HTML电子邮件中链接块级元素？

htmlemailhyperlinkoutlookblock

6

如何在html邮件中使整个内容块可点击，以便在Outlook（2003, 2007, 2010）中也能正常工作呢？

例如，我有这个CTA：

call to action button

到目前为止，我想到了以下方法：

  <table cellpadding="0" cellspacing="0" style="border: 1px #ffffff dashed;">
    <!-- NAVIGATION AREA START -->
    <tr>
      <td width="370" style="font-family:'Times New Roman', Times, serif;font-size: 22px;font-weight:bold;line-height:52px;">
        <div style="margin-left: 15px; margin-top: 0; margin-bottom: 0; height:100%;">
            <a href="http://${servername}/" style="text-decoration:none;color:#fff;">
                LEARN MORE ABOUT ABOUT THIS
            </a>
        </div>
      </td>
      <td width="160">
        <table cellpadding="0" cellspacing="0" height="24">
            <tr>
                <td>
                    <div style="background-color:#fff; margin-top: 0; margin-bottom: 0;width:128px;height:24px;color: #000000;text-decoration: none;font-size: 12px;line-height: 24px;">
                        <a href="http://${servername}/" style="text-decoration:none;color:#000;margin-left: 5px;">
                            CLICK HERE
                        </a>
                    </div>
                </td>
                <td>
                    <img style="display: block;" width="13" height="24" border="0" alt="" title="" src="http://${servername}/images/mailing/arrow-white.png" />
                </td>
            </tr>
        </table>
      </td>
    </tr>
    <!-- NAVIGATION AREA END -->
  </table>

问题在于虚线边框内的整个区域都应该是可点击的。我尝试使用a标签将整个table包裹起来，但这在Outlook或IE中不起作用（Firefox中可以）。

或者，请考虑以下内容:

<table width="255" cellspacing="0" cellpadding="0" bgcolor="#000000" style="border: 10px solid #fff;">
    <tr>
        <td valign="top" style="width:130px;padding-bottom: 15px; padding-top: 15px; padding-left: 15px;">
            <p style="color:#ffffff;font-family:'Times New Roman', Times, serif;font-size: 16px;margin-top: 0; margin-bottom: 5px;">
                <strong>FAQ</strong>
            </p>
            <p style="font-family: arial,sans-serif; font-size: 14px; color:#d0d0d0; line-height: 20px; margin-top: 0; margin-bottom: 0;">
                Learn more about our services.
            </p>
        </td>
        <td align="center" style="padding-bottom: 15px; padding-top: 15px;">
            <p style="margin-top: 0;margin-bottom: 0;">
                <img width="54" height="102" border="0" src="http://${servername}/images/mailing/questionmark.png" title="" alt="">
            </p>
        </td>
    </tr>
</table>

在这里，整个块（白色边框内）应该是可点击的，而不仅仅是单独的文本行。

考虑到Outlook 2007/2010对CSS的支持差（例如没有display CSS属性），您会如何解决这个问题？

底线：如何链接块级元素，而无需使用a标签将其包装起来（尝试使用table和div），或者使用display: block;？

- 360path

也许你可以考虑使用基于DIV的布局，而不是基于表格的布局。 - Mrchief

3

由于Outlook 2007/2010支持较差，所以DIV并不是一个好的选择。除非你是在说DIV在这些客户端中可以使用？ - 360path

我对HTML模板不是很了解，但这里有一篇好文章：http://www.thoughtresults.com/html-email-templates。 - Saeed Neamati

@Saeed：是的，我知道HTML邮件模板的一般限制，不过还是谢谢你提供的链接！ - 360path

5个回答

1

在每个字段中放置一个<a>。不够优雅，但是可以工作。

如果有一个字段为空，只需在其中放置一个透明的图像，其宽度和高度正确。（图像本身不在html中调整大小）

- Malachi

0

个人而言，我会将行动呼吁作为一张图片添加到电子邮件中，并简单地用锚点标签包围它。

<a href="//"><img src="http://myimage.com/image.png" alt="" /></a>

考虑到这是一封电子邮件，您想在HTML中建立呼吁行动的原因是什么？

更新

或者您可以尝试类似以下的方法：

http://jsfiddle.net/gv5aZ/

（我为您准备的快速代码示例）

- Jamie Dixon

2

很遗憾，我无法在那里使用图像，因为文本是灵活的，并且由CMS生成。 - 360path

2

谢谢，但正如我所提到的，不幸的是Outlook 07/10不支持display。请看这里：http://www.campaignmonitor.com/css/ - 360path

0

我没有进行过全面的测试，但我成功地让某些东西工作了。

在您的标题样式和'a href=""'中添加以下内容：

标题样式：

#outlook a { padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; }

链接内联样式：

<a style="font-family: #; font-size: #px; text-decoration: #; border: #color #px #; color: #; padding-bottom: #px; padding-top: #px; padding-left: #px; display: inline-block; padding-right: #px; font-style: #;" href="#" target="_blank">Read more...</a>

将＃替换为您的样式，除了显示属性（保留该属性！）

再次说明，我没有对此进行广泛测试，但对我而言有效，因此请不要漏掉我在这里写的任何内容 :)

编辑：您的设计中可能没有边框，因此将其设置为与背景相同的颜色

- lejimmie

您是否已经测试过Outlook 2007/2010？正如我在我的原始帖子中提到的那样，在该客户端中不支持display属性。不幸的是，我目前没有Outlook，无法测试您的建议。 - 360path

我在你的情况下没有完全测试过这个，实际上这可能并不是一个正确的答案...我的代码允许链接作为块元素（有点像）-无论包裹表格时是否有效，我不确定-我会在某个时候进行测试并报告。 - lejimmie

-2

为什么不在表格周围放置一个锚点？虽然我不确定它是否适用于Outlook，但这是最简单的解决方案。

<a href="...."><table>....</table></a>

- Gerben

这就是为什么这是我首先想到的事情。但正如我在原始帖子中所说：我尝试使用a标签包装整个“table”，但在Outlook或IE中无法正常工作（它可以在Firefox中工作）。 - 360path

我没有尝试过那个。但是我在想，Outlook 不喜欢 a 标签内的块级元素。事实上，XHTML 规范也不允许这样做。 - 360path

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jeroen · Accepted Answer

本答案旨在展示所有不同选项在Outlook(2013)中的渲染情况，从目前为止发现的“最佳”解决方案开始:

<table width="100%" style="background-color: #ccc;"><tr>
<td style="padding: 15px; text-align: center;">
    <a href="http://www.stackoverflow.com" style="text-decoration: none; color: #333;">
        Go to some great website!
    </a>
</td>
</tr></table>

此内容将呈现如下：

或者，带有链接命中框的注释： link in email, annotated best version

是的，这很糟糕：您希望整个区块都可以点击。基本上，我在这里告诉您，“如何链接块元素（与 Outlook 兼容）”的答案是：这是不可能的，除非使用某些变通方法。

为了支持我的说法（附注：我欢迎任何人证明我的说法错误！），以下是我尝试过的所有变化及其在 Outlook 中的呈现情况。我还尝试包括其他答案中提出的一些解决方案。

以下是我用于生成电子邮件的代码：

<html>
    <head>
        <title>My e-mail</title>
    </head>
    <body>
        <table width="660px" align="center" border="0" cellspacing="0" cellpadding="0" style="width: 660px;">
            <tr>
                <td style="padding: 15px;">

                    <p>1. The "best" text-only version I've found:</p>
                    <table width="100%" style="background-color: #ccc;"><tr>
                    <td style="padding: 15px; text-align: center;">
                        <a href="http://www.stackoverflow.com" style="text-decoration: none; color: #333;">
                            Go to some great website!
                        </a>
                    </td>
                    </tr></table>

                    <hr />
                    <p>2a. Workaround using an image. Setting size through style attribute does not work.</p>
                    <a href="http://www.stackoverflow.com">
                        <img alt="Go to some great website!" src="your custom image" style="width: 100%; height: 30px;" />
                    </a>

                    <hr />
                    <p>2b. Workaround using an image. Kind of works, but requires an image of exactly correct size through attributes.</p>
                    <a href="http://www.stackoverflow.com">
                        <img alt="Go to some great website!" src="your custom image" width="640px" height="30px" />
                    </a>

                    <hr />
                    <p>3. Attempt to link the entire table. Does not work.</p>
                    <a href="http://www.stackoverflow.com" style="text-decoration: none; color: #333;">
                        <table width="100%" style="background-color: #ccc;"><tr>
                        <td style="padding: 15px; text-align: center;">
                                Go to some great website!
                        </td>
                        </tr></table>
                    </a>

                    <hr />
                    <p>5. Attempt to link the entire div. Does not work.</p>
                    <a href="http://www.stackoverflow.com" style="text-decoration: none; color: #333;">
                        <div style="background-color: #ccc; padding: 15px; text-align: center;">
                            Go to some great website!
                        </div>
                    </a>

                    <hr />
                    <p>6. Setting anchor tag to display as a block. Does not work.</p>
                    <a href="http://www.stackoverflow.com" style=" display: block; text-decoration: none; color: #333; background-color: #ccc; padding: 15px; text-align: center;">
                        Go to some great website!
                    </a>

                    <hr />
                    <p>6. Hacking with line-height, does not work.</p>
                    <div style="background-color: #ccc; text-align: center;">
                        <a href="http://www.stackoverflow.com" style="line-height: 3em; text-decoration: none; color: #333;">
                            <span style="vertical-align: middle;">Go to some great website!</span>
                        </a>
                    </div>

                </td>
            </tr>
        </table>
    </body>
</html>

这是Outlook 2013的渲染效果，附有链接点击区域的注释：

renderings by outlook of the above code