如何链接html电子邮件中的块级元素？
在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的不良支持（例如没有display CSS属性），您会如何解决这个问题？
底线：如何链接块级别的商品而不能使用a（尝试使用table和div）或使用display: block;进行包装吗
5 个答案:
答案 0 :(得分：2)
此答案旨在展示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>
这将呈现如下：
或者，链接hitbox注释：
是的，这很糟糕：你希望整个块可以点击。基本上我在这里告诉你问题的答案“如何链接块元素（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如何呈现它们，并使用链接hitbox注释：
答案 1 :(得分：0)
就个人而言，我会将号召性用语添加为电子邮件中的图片，并简单地用锚标记包装。
<a href="//"><img src="http://myimage.com/image.png" alt="" /></a>
鉴于这是针对电子邮件的，您是否有理由在HTML中建立号召性用语？
<强>更新
或者你也可以这样做：
（我为你准备的小提琴）
答案 2 :(得分：0)
在每个字段中加上<a>。不优雅，但这很有效。
如果有一个空的字段，只需在其中放置一个正确的宽度和高度的透明图像。 （图像本身，未在html中调整大小）
答案 3 :(得分：-1)
我没有对此进行过广泛的测试，但我确实得到了一些工作。
在标题样式和'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>
将＃替换为您的样式，当然除了显示属性（将其保留在！）
同样，我没有对此进行过广泛的测试，但对我来说它的确有效，所以不要错过我在这里所写的内容：）
编辑：您的设计中可能没有边框，因此请将其设置为与背景相同的颜色
答案 4 :(得分：-3)
你为什么不在桌子周围放一个锚？虽然不完全确定它是否适用于Outlook，但它是最简单的解决方案
<a href="...."><table>....</table></a>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？