如何链接 html 电子邮件中的块级元素？
360*_*ath 5 html email outlook block hyperlink
在 html 电子邮件中使整个内容块可点击的最佳方法是什么，以便它也适用于 Outlook（2003、2007、2010）。
例如，我有这个号召性用语：
到目前为止，我想出了这个：
<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>
问题是虚线边框内的整个区域都应该是可点击的。我尝试table用a标签包装整个，但这在 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 的不良支持（例如，没有displayCSS 属性），您将如何处理？
底线：如何链接块级元素而不能用a（尝试用table和div）或使用包装它display: block;？
这个答案旨在展示所有不同的选项如何在 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>
这将呈现如下：
或者，带有注释的链接命中框：
是的，这很糟糕：你希望整个块都是可点击的。基本上，我在这里告诉您“如何链接块元素（与 Outlook 兼容） ”问题的答案是：这是不可能的，并非没有解决方法。
为了支持我的主张（PS。我非常欢迎任何人证明这一主张是错误的！），以下是我尝试过的所有变体，以及它们在 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 呈现它们的方式，并用链接命中框进行注释：
就我个人而言，我会将号召性用语作为图像添加到电子邮件中，然后简单地用锚标记将其包裹起来。
<a href="//"><img src="http://myimage.com/image.png" alt="" /></a>
鉴于这是一封电子邮件，您是否有理由想要在 HTML 中构建号召性用语？
更新
或者你可以这样做：
（我为你整理的快速小提琴）
- 不幸的是，我不能在那里使用图像，因为文本是灵活的并且是由 CMS 生成的。 (2认同)
- 谢谢，但正如我所提到的，不幸的是 Outlook 07/10 不支持“显示”。请参阅此处：http://www.campaignmonitor.com/css/ (2认同)