我有一个html电子邮件模板，我正在尝试为客户端设置。我遇到的问题是我需要有4个空白的颜色块，不能包含图像。这些需要链接到外部网站，我可以创建tds为空颜色块，但我不能使它们完全可点击。有没有人有任何想法？代码如下。
<div style="font-family: Arial; font-size: 12px; overflow:hidden;">
<table cellpadding="0" cellspacing="0" border="0" style="border-collapse: separate; border-spacing: 10px 5px; margin: 0 0; width: 320px;">
<tr>
<td width="25%" style="vertical-align:bottom; text-align:center;">
<a style=" text-decoration: none !important; padding: 30px 10px; width: 106px; background: #cd3333; color: #cd3333; display: block;" class="red" width="106px" height="65px" href="http://www.google.co.uk">
<table style="background: #cd3333; color: #cd3333;">
<tr>
<td width="106" height="65"><a href=" href="http://www.google.co.uk" style="padding: 30px 10px; color:#CC3333; text-decoration: none !important;">Unhappy</a></td>
</tr>
</table>
</a>
</td>
<td width="25%" style="vertical-align:bottom; text-align:center;">
<a style=" text-decoration: none !important; padding: 30px 10px; width: 106px; background: #ffb50e; color: #ffb50e; display: block;" href=" href="http://www.google.co.uk" class="amber" width="106px" height="65px">
<table style="background: #ffb50e; color: #ffb50e;">
<tr>
<td width="106" height="65"><a href=" href="http://www.google.co.uk" style="padding: 30px 10px; color:#FFB40D; text-decoration: none !important;">Acceptable</a></td>
</tr>
</table>
</a>
</td>
<td width="25%" style="vertical-align:bottom; text-align:center;">
<a style=" text-decoration: none !important; padding: 30px 10px; width: 106px; background: #67cb33; color: #67cb33; display: block;" class="green" width="106px" height="65px" href=" href="http://www.google.co.uk">
<table style="background: #67cb33; color: #67cb33;">
<tr>
<td width="106" height="65"><a href=" href="http://www.google.co.uk" style="padding: 30px 10px; color:#66CC33; text-decoration: none !important;">Happy</a></td>
</tr>
</table>
</a>
</td>
<td width="25%" style="vertical-align:bottom; text-align:center;">
<a style=" text-decoration: none !important; padding: 30px 10px; width: 106px; background: #b9850d; color: #b9850d; display: block;" class="gold" width="106px" height="65px" href=" href="http://www.google.co.uk">
<table style="background: #b9850d; color: #b9850d;">
<tr>
<td width="106" height="65"><a href=" href="http://www.google.co.uk" style="padding: 30px 10px; color:#b9850d; text-decoration: none !important;">Delighted</a></td>
</tr>
</table>
</a>
</td>
</tr>
</table>
</div>
https://jsfiddle.net/tbscgbvy/
正如您所看到的，它可以在浏览器中运行，但当我将其用作电子邮件模板时，我无法使其工作，以便在Outlook中显示。
任何帮助都将不胜感激。
答案 0 :(得分：0)
我认为这是因为您的代码在每个a标记中都存在语法错误。请解决它。
<a href=" href="http://www.google.co.uk" style="padding: 30px 10px; color:#66CC33; text-decoration: none !important;">Happy</a>
必须是这样的：
<a href="http://www.google.co.uk" style="padding: 30px 10px; color:#66CC33; text-decoration: none !important;">Happy</a>
答案 1 :(得分：0)
如上面的答案所述，您的超链接中存在错误。我编辑了代码段。
<div style="font-family: Arial; font-size: 12px; overflow:hidden;">
<table cellpadding="0" cellspacing="0" border="0" style="border-collapse: separate; border-spacing: 10px 5px; margin: 0 0; width: 320px;">
<tr>
<td width="25%" style="vertical-align:bottom; text-align:center;">
<a style=" text-decoration: none !important; padding: 30px 10px; width: 106px; background: #cd3333; color: #cd3333; display: block;" class="red" width="106px" height="65px" href="http://www.google.co.uk">
<table style="background: #cd3333; color: #cd3333;">
<tr>
<td width="106" height="65"><a href="http://www.google.co.uk" style="padding: 30px 10px; color:#CC3333; text-decoration: none !important;">Unhappy</a></td>
</tr>
</table>
</a>
</td>
<td width="25%" style="vertical-align:bottom; text-align:center;">
<a style=" text-decoration: none !important; padding: 30px 10px; width: 106px; background: #ffb50e; color: #ffb50e; display: block;" href=" href="http://www.google.co.uk" class="amber" width="106px" height="65px">
<table style="background: #ffb50e; color: #ffb50e;">
<tr>
<td width="106" height="65"><a href="http://www.google.co.uk" style="padding: 30px 10px; color:#FFB40D; text-decoration: none !important;">Acceptable</a></td>
</tr>
</table>
</a>
</td>
<td width="25%" style="vertical-align:bottom; text-align:center;">
<a style=" text-decoration: none !important; padding: 30px 10px; width: 106px; background: #67cb33; color: #67cb33; display: block;" class="green" width="106px" height="65px" href=" href="http://www.google.co.uk">
<table style="background: #67cb33; color: #67cb33;">
<tr>
<td width="106" height="65"><a href="http://www.google.co.uk" style="padding: 30px 10px; color:#66CC33; text-decoration: none !important;">Happy</a></td>
</tr>
</table>
</a>
</td>
<td width="25%" style="vertical-align:bottom; text-align:center;">
<a style=" text-decoration: none !important; padding: 30px 10px; width: 106px; background: #b9850d; color: #b9850d; display: block;" class="gold" width="106px" height="65px" href=" href="http://www.google.co.uk">
<table style="background: #b9850d; color: #b9850d;">
<tr>
<td width="106" height="65"><a href="http://www.google.co.uk" style="padding: 30px 10px; color:#b9850d; text-decoration: none !important;">Delighted</a></td>
</tr>
</table>
</a>
</td>
</tr>
</table>
</div>