【发布时间】：2017-09-22 09:56:24
【问题描述】：
我有一个要为客户设置的 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 中。
任何帮助将不胜感激。
【问题讨论】：
-
而不是填充给高度和宽度：130px;高度：130px;
-
这是写锚标签内联css的方法 google.co.uk">
标签： html css outlook html-table html-email