在为 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>
最佳答案
我知道这是一个老问题,但我一直在寻找这个问题的答案(在 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 上的那篇博文提到他们已经创建了一个 specific website to generate outlook compatible clickable buttons - http://buttons.cm 基于 Stig M(推特上的@stigm)创建的解决方案。
我不为 campaignmonitor 工作。
希望对某人有所帮助。
关于css - 通过 anchor 标记使整个 <td> 可点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17832308/