通过锚点标记使整个<td>都可以点击
在为Outlook创建html电子邮件时，我偶然发现了一个无法解决的小问题。
下面是一个html表格的屏幕截图。我需要使整个区域可点击，而不仅仅是文本。当我把<a href="#">放在<td>或<table>上时，它可以在浏览器中工作，但在Outlook中就不行了。
代码如下：
<table border="0" cellpadding="0" cellspacing="0" style="border-top-left-radius: 5px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;background-color: #2FBA45;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tbody>
<tr>
<td align="center" valign="middle" style="font-family: Arial;font-size: 22px;padding: 15px;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<a href="#" title="Yes please, send me a quote." target="_self" style="font-weight: bold;letter-spacing: -0.5px;line-height: 100%;text-align: center;text-decoration: none;color: #FFFFFF;word-wrap: break-word !important; display:block; width:100%; height:100%">Yes please, send me a quote.</a>
</td>
</tr>
</tbody>
</table>回答 4
Stack Overflow用户
发布于 2013-11-29 15:20:03
我知道这是一个古老的问题，但我正在寻找这个问题的答案(Outlook中可单击的整个按钮)，并偶然发现了以下解决方案：
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" valign="middle" >
<!-- start of Outlook compatible button generated by http://buttons.cm/ -->
<div><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://yoururlhere.com/" style="height:52px;v-text-anchor:middle;width:330px;" arcsize="10%" stroke="f" fillcolor="#2fba45">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://yoururlhere.com/"
style="background-color:#2fba45;border-radius:5px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:52px;text-align:center;text-decoration:none;width:330px;-webkit-text-size-adjust:none;">Yes please, send me a quote.</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>
<!-- end of Outlook compatible button generated by http://buttons.cm/ -->
</td>
</tr>
</tbody>
</table>注意，我还没有测试过上面的代码。
其他答案确实链接到campaignmonitor网站，但不是this link which provided the solution。
campaignmonitor的那篇博客文章提到，他们已经基于Stig M(推特上的@ specific website to generate outlook compatible clickable buttons - http://buttons.cm )创建的解决方案创建了一个specific website to generate outlook compatible clickable buttons - http://buttons.cm 。
我不为campaignmonitor工作。
希望这能帮助到一些人。
Stack Overflow用户
发布于 2013-07-24 19:15:41
尝尝这个
http://jsfiddle.net/KrRzP/
<table border="0" cellpadding="0" cellspacing="0" style="border-top-left-radius: 5px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;background-color: #2FBA45;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; cursor:pointer;">
<tbody>
<tr>
<td align="center" valign="middle" style="font-family: Arial;font-size: 22px;padding: 15px;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<a href="http://www.example.org" title="Yes please, send me a quote." target="_self" style="font-weight: bold;letter-spacing: -0.5px;line-height: 100%;text-align: center;text-decoration: none;color: #FFFFFF;word-wrap: break-word !important; display:block; width:100%; height:100%">Yes please, send me a quote.</a>
</td>
</tr>
</tbody>
</table>Stack Overflow用户
发布于 2013-07-24 19:39:54
您可以尝试使用<td onClick="go to anchor">的onClick。在内联样式中，你应该添加cursor: pointer，这样光标就会变成'hover a link‘-指针。
https://stackoverflow.com/questions/17832308
复制相似问题
腾讯云开发者
